thinkPHP实现瀑布流的方法
thinkPHP实现瀑布流的方法

本文实例讲述了thinkPHP实现瀑布流的方法。分享给大家供大家参考。具体分析如下:
很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.html里面包含的很多示例.
流程:
1. 页面初始化时,调用插件进行一次排版;
2. 当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示
3. 重复2,直到无数据
Html代码:
<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实现瀑布流的方法的更多相关文章
- 简单CSS定位瀑布流实现方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用label实现横向瀑布流的方法
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAAKxCAIAAAAn+3udAAAKqWlDQ1BJQ0MgUHJvZmlsZQAASImVlg
- 用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- js实现瀑布流的一种简单方法实例分享
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- 使用原生javascript实现瀑布流
简介 瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较 ...
- python3抓取异步百度瀑布流动态图片(一)查找post并伪装头方法
打开流程: 用火狐打开百度图片-->打开firebug-->输入GIF图-->搜索-->点击网络-->全部 观察页面: 首先要观察的对象是“域”,图片的json一般是放在 ...
- ThinkPHP官网瀑布流实现分享
很多人都想做瀑布流的效果,这里告诉大家官网使用的方法. 首先要下载瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.ht ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
随机推荐
- Android中make命令
转自:http://blog.sina.com.cn/s/blog_abc7e49a01011y0n.html 1.make -jXX XX表示数字,这个命令将编译Android系统并生成镜像,XX ...
- CI中REST URL含有中文怎么处理(报错:The URI you submitted has disallowed characters)
解决方法: 客户端在发送GET URL请求的时候,将含有中文的URL编码即可 比如: 原始:http://localhost/qk/rest/user_album_api/get_user_album ...
- PHP自毁程序
<?php // +---------------------------------------------------------------------- // | Kill!! // | ...
- 使用jQuery Mobile + PhoneGap 开发Android应用程序(转)
使用jQuery Mobile + PhoneGap 开发Android应用程序(转) 一.简介 jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅给 ...
- codevs 2924 数独
数独挑战 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codevs.cn/problem/2924/ Description “芬兰数学家因 ...
- 电赛菜鸟营培训(三)——STM32F103CB之串口通信
一.串口通信概念 1.缩写 USART:Universal Synchronous/Asynchronous Receiver/Transmitter 通用同步/异步接收和发送器 2.用处 (1)同步 ...
- Web开发中运行环境的配置:(Tomcat7.0.59)和开发环境的配置
第一部分:运行环境的配置 1.下载压缩包,解压即可 2.配置系统变量JAVA_HOME为jdk的安装路径 3.如有需要修改端口号,比如8080已被占用的时候,可以将其改为9080等 apache-to ...
- diff和common
diff 命令 diff命令:找出两个文件的不同点,用于比较文件的差异 linux上非常重要的工具,一般用于制作补丁文件,特别是比较两个版本不同的文件以找到改动的地方. diff在命令行中打印每一个行 ...
- 【部分原创】标准C语言的优先级、结合性、求值顺序、未定义行为和非确定行为浅析
零. 优先级 在C++ Primer一书中,对于运算符的优先级是这样描述的: Precedence specifies how the operands are grouped. It ...
- 在Windows下利用MinGW编译FFmpeg
目录 [隐藏] 1 环境与软件 2 第一步:安装MinGW 3 第二步:配置编译环境 4 第三步:配置SDL 5 第四步:编译 5.1 编译faac 5.2 编译fdk-aac 5.3 编译x264 ...