thinkPHP实现瀑布流的方法

文章TAG：thinkphp 瀑布流
时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃
这篇文章主要介绍了thinkPHP实现瀑布流的方法,实例讲述了瀑布流插件的应用以及对应的HTML与Action代码,是非常实用的技巧,需要的朋友可以参考下
 
 
 

本文实例讲述了thinkPHP实现瀑布流的方法。分享给大家供大家参考。具体分析如下：

很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例.

流程:

1. 页面初始化时,调用插件进行一次排版；

2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示

3. 重复2,直到无数据

Html代码:

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<!--样式-->  
<style type="text/css">  
body {margin:40px auto; width:800px; font-size:12px; color:#666;}  
.item{  
border: 1px solid #D4D4D4;  
color: red;  
margin: 0 10px 10px 0;  
padding: 10px;  
position: relative;  
width: 200px;  
}  
.loading-wrap{  
bottom: 50px;  
width: 100%;  
height: 52px;  
text-align: center;  
display: none;  
}  
.loading {  
padding: 10px 10px 10px 52px;  
height: 32px;  
line-height: 28px;  
color: #FFF;  
font-size: 20px;  
border-radius: 5px;  
background: 10px center rgba(0,0,0,.7);  
}  
.footer{  
border: 2px solid #D4D4D4;  
}  
</style>  
<!--样式-->  
</head>  
<body>  
<!--引入所需要的jquery和插件-->  
<script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script>  
<script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script>  
<!--引入所需要的jquery和插件-->  
<!--瀑布流-->  
<div id="container" class=" container">  
<!--这里通过设置每个div不同的高度，来凸显布局的效果-->  
<volist name="height" id="vo">  
<div class="item" style="height:{$vo}px;">瀑布流下来了</div>  
<input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/>  
</volist>  
</div>  
<!--瀑布流-->  
<!--加载中-->  
<div id="loading" class="loading-wrap">  
<span class="loading">加载中，请稍后...</span>  
</div>  
<!--加载中-->  
<!--尾部-->  
<div class="footer"><center>我是页脚</center></div>  
<!--尾部-->  
<script type="text/javascript">  
//用于转换unix时间戳  
function unix_to_datetime(unix)   
{  
var now = new Date(parseInt(unix) * 1000);  
return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");  
}  
$(function(){  
//页面初始化时执行瀑布流  
var $container = $('#container');  
$container.masonry({  
itemSelector : '.item',  
isAnimated: true  
});  
//用户拖动滚动条，达到底部时ajax加载一次数据  
var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求  
$(window).scroll(function(){  
if(loading.data("on")) return;  
if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了  
//加载更多数据  
loading.data("on", true).fadeIn(); //在这里将on设为true来阻止继续的ajax请求  
  
//获取最后一个id  
var lastid = $('.last_id:last').val();  
$.get(  
"getMore", //要跳转的页面  
{lastid:lastid},//传值  
function(data){  
//获取到了数据data,后面用JS将数据新增到页面上  
var getdata = data.data;  
var html = "";  
if($.isArray(getdata)){  
$.each(data.data,function(i,item) {  
html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下来了</div>";  
});  
var $newElems = $(html).css({ opacity: 0 }).appendTo($container);  
$newElems.imagesLoaded(function(){  
$newElems.animate({ opacity: 1 });  
$container.masonry( 'appended', $newElems, true );   
});  
//一次请求完成，将on设为false，可以进行下一次的请求  
loading.data("on", false);  
}  
loading.fadeOut();  
},  
"json"  
);  
}  
});  
});  
</script>  
</body>  
</html>

Action代码：

复制代码代码如下:
//初始化的数据  
public function lists(){   
$data = D('Info')->order('id DESC')->limit(10)->select();  
$this->assign('data', $data);  
$this->display();  
}  
//获取一次请求的数据  
public function getMore(){   
//获取最后一个id  
if(!emptyempty($_GET['lastid']))$map['id'] = array('lt', $_GET['lastid']);   
$data = D('Info')->where($map)->order('id DESC')->limit(10)->select();  
$this->ajaxReturn($data);  
}

注意:通过判断窗口是否滚动到页面底部来决定用ajax加载一次数据,如果不做处理,会一下子请求很多次,所以,要使用条件来限制.

这里使用的是往一个元素上赋值 $("#loading").data("on", true);,在请求期间判断是true则不继续请求,然后在页面请求完成后再赋值为false.

希望本文所述对大家的ThinkPHP框架程序设计有所帮助。

thinkPHP实现瀑布流的方法的更多相关文章

  1. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用label实现横向瀑布流的方法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAKxCAIAAAAn+3udAAAKqWlDQ1BJQ0MgUHJvZmlsZQAASImVlg

  3. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  4. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  5. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  6. 使用原生javascript实现瀑布流

    简介 瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较 ...

  7. python3抓取异步百度瀑布流动态图片（一）查找post并伪装头方法

    打开流程: 用火狐打开百度图片-->打开firebug-->输入GIF图-->搜索-->点击网络-->全部 观察页面: 首先要观察的对象是“域”,图片的json一般是放在 ...

  8. ThinkPHP官网瀑布流实现分享

    很多人都想做瀑布流的效果,这里告诉大家官网使用的方法. 首先要下载瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.ht ...

  9. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

随机推荐

  1. Android中make命令

    转自:http://blog.sina.com.cn/s/blog_abc7e49a01011y0n.html 1.make -jXX  XX表示数字,这个命令将编译Android系统并生成镜像,XX ...

  2. CI中REST URL含有中文怎么处理(报错：The URI you submitted has disallowed characters)

    解决方法: 客户端在发送GET URL请求的时候,将含有中文的URL编码即可 比如: 原始:http://localhost/qk/rest/user_album_api/get_user_album ...

  3. PHP自毁程序

    <?php // +---------------------------------------------------------------------- // | Kill!! // | ...

  4. 使用jQuery Mobile + PhoneGap 开发Android应用程序(转)

    使用jQuery Mobile + PhoneGap 开发Android应用程序(转) 一.简介 jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅给 ...

  5. codevs 2924 数独

     数独挑战 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codevs.cn/problem/2924/ Description “芬兰数学家因 ...

  6. 电赛菜鸟营培训（三）——STM32F103CB之串口通信

    一.串口通信概念 1.缩写 USART:Universal Synchronous/Asynchronous Receiver/Transmitter 通用同步/异步接收和发送器 2.用处 (1)同步 ...

  7. Web开发中运行环境的配置：（Tomcat7.0.59）和开发环境的配置

    第一部分:运行环境的配置 1.下载压缩包,解压即可 2.配置系统变量JAVA_HOME为jdk的安装路径 3.如有需要修改端口号,比如8080已被占用的时候,可以将其改为9080等 apache-to ...

  8. diff和common

    diff 命令 diff命令:找出两个文件的不同点,用于比较文件的差异 linux上非常重要的工具,一般用于制作补丁文件,特别是比较两个版本不同的文件以找到改动的地方. diff在命令行中打印每一个行 ...

  9. 【部分原创】标准C语言的优先级、结合性、求值顺序、未定义行为和非确定行为浅析

    零. 优先级    在C++ Primer一书中,对于运算符的优先级是这样描述的:     Precedence specifies how the operands are grouped. It ...

  10. 在Windows下利用MinGW编译FFmpeg

    目录 [隐藏]  1 环境与软件 2 第一步:安装MinGW 3 第二步:配置编译环境 4 第三步:配置SDL 5 第四步:编译 5.1 编译faac 5.2 编译fdk-aac 5.3 编译x264 ...