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. PHP 5.4中的traits特性

    Trait 是 PHP5. 中的新特性,是 PHP 多重继承的一种解决方案.例如,需要同时继承两个 Abstract Class, 这将会是件很麻烦的事情,Trait 就是为了解决这个问题. 简单使用 ...

  2. hdu 4004 二分 2011大连赛区网络赛D

    题意:一个长为L的河,中间有n个石子,小青蛙需要跳少于m次过河,判断小青蛙每次跳跃最大距离的最小值 最大值最小,用二分 Sample Input 6 1 2 2 25 3 3 11 2 18 Samp ...

  3. Android ImageView图片自适应 （转）

    网络上下载下来的图片自适应:android:adjustViewBounds="true"(其详细解释在下面)<ImageView     android:id=" ...

  4. 修改ViewPager调用setCurrentItem时，滑屏的速度

    原文摘自: 修改ViewPager调用setCurrentItem时,滑屏的速度 在使用ViewPager的过程中,有需要直接跳转到某一个页面的情况,这个时候就需要用到ViewPager的setCur ...

  5. 建模算法（八）——插值

    插值:求过已知有限个数据点的近似函数 拟合:已知有限个数据点,求近似函数,不要求过已知数据点,只要求在某种意义下在这些点的误差最小 (一)插值方法 一.拉格朗日多项式插值 1.插值多项式 就是做出一个 ...

  6. 概率 Gym 100502D Dice Game

    题目传送门 /* 题意:两个人各掷两个骰子,给出每个骰子的最小值和最大值,其余值连续分布 问两人投掷,胜利的概率谁大 数据小,用4个for 把所有的可能性都枚举一遍,统计每一次是谁胜利 还有更简单的做 ...

  7. MVC 依赖注入扩展

    需求: 小明想要完成一个功能F,需要一把锤子T. 有两种办法可以实现: 1)小明很爱动手,精力很旺盛,于是,自己创建一个具有功能F的锤子T,并使用T来完成F: 2)小明很懒,天天睡大觉,于是,他叫小健 ...

  8. BZOJ3577 : 玩手机

    很明显网络流. S到每个发射站连边,容量为该站限制 每个接收站到T连边,容量为该站限制 矩阵每个点拆成两个点i和i',i向i'连边,容量为该位置手机数 每个发射站向该正方形内所有点i连边,容量为无穷大 ...

  9. vnc使用

    使用rpm –qa vnc命令如果收到如下信息说明已经安装了vncserver, [root@localhost: ~]#rpm -qa |grep vnc gtk-vnc-python--.el5 ...

  10. 解决xubuntu的thunar第一次启动慢

    装了Xubuntu后,一直都挺好,只不过就是有一个问题老困扰我,就是每次开机打开thunar都是极慢的.... 一直没注意,原来也一直找不到问题,后来今天一搜,唷呵...找到了. 解决方法 thuna ...