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. 必须正确理解的---ng指令中的compile与link函数解析

    这个绝对是深入的知识,但看完之后,对NG的理解就很利害啦. http://www.ifeenan.com/angularjs/2014-09-04-%5B%E8%AF%91%5DNG%E6%8C%87 ...

  2. [原]AppPoolService-IIS应用程序池辅助类（C#控制应用程序池操作）

    using System.Collections.Generic; using System.DirectoryServices; using System.Linq; using Microsoft ...

  3. 【codevs1191】数轴染色 线段树 区间修改+固定区间查询

    [codevs1191]数轴染色 2014年2月15日4317 题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[L ...

  4. 电赛总结（三）——DA芯片总结

    一.AD7890 1.特性参数 (1)高速12位DA,转换速度5.9us (2)具有8个通道. (3)串行通信 2.芯片管脚图 3.管脚功能 管脚名称 功能 AGND 模拟地 SMODE 控制端,&q ...

  5. TextView属性大全

    今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符号等就会有问题,目前还没有 ...

  6. QUnit使用笔记-3测试用户操作

    模拟操作: elem.trigger(event); elem.triggerHandler(event); triggerHandler的不同: 不会引起事件的默认行为 .trigger() 会操作 ...

  7. bzoj1019 [SHOI2008]汉诺塔

    1019: [SHOI2008]汉诺塔 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1030  Solved: 638[Submit][Status] ...

  8. splice JavaScript Array 对象

    定义和用法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 注释:该方法会改变原始数组. 语法 arrayObject.splice(index,howmany,item1, ...

  9. chrome developer tool 调试技巧

    这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...

  10. 优雅绝妙的Javascript跨域问题解决方案

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...