thinkPHP实现瀑布流的方法


Posted in PHP onNovember 29, 2014

本文实例讲述了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框架程序设计有所帮助。

PHP 相关文章推荐
PHP生成带有雪花背景的验证码
Sep 28 PHP
php 高效率写法 推荐
Feb 21 PHP
php设计模式 State (状态模式)
Jun 26 PHP
PHP手机号码归属地查询代码(API接口/mysql)
Sep 04 PHP
深入解析php中的foreach问题
Jun 30 PHP
计算php页面运行时间的函数介绍
Jul 01 PHP
Yii模型操作之criteria查找数据库的方法
Jul 15 PHP
php版微信公众号接口实现发红包的方法
Oct 14 PHP
PHP实现的Redis多库选择功能单例类
Jul 27 PHP
浅谈PHP中new self()和new static()的区别
Aug 11 PHP
详细解读php的命名空间(一)
Feb 21 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
Dec 30 PHP
php删除左端与右端空格的方法
Nov 29 #PHP
ThinkPHP自动完成中使用函数与回调方法实例
Nov 29 #PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
Nov 29 #PHP
Sublime里直接运行PHP配置方法
Nov 28 #PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
Nov 28 #PHP
PHP使用get_headers函数判断远程文件是否存在的方法
Nov 28 #PHP
php的mssql数据库连接类实例
Nov 28 #PHP
You might like
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php中的依赖注入实例详解
2019/08/14 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python发腾讯微博代码分享
2014/01/10 Python
python基础教程之自定义函数介绍
2014/08/29 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python笔记之代理模式
2019/11/20 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
学困生转化工作总结
2015/08/13 职场文书
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python