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. p235习题3

  2. kmv xml 文件配置vnc 端口冲突 会无法启动

    <graphics type=' autoport='no' listen='0.0.0.0'> 如果有多个虛机用相同vnc port的话,只能有一个可以启动,所以vnc port号是唯一 ...

  3. hdu 1010:Tempter of the Bone（DFS + 奇偶剪枝）

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  4. Java程序员最常用的8个Java日志框架

    转自:http://www.codeceo.com/article/8-java-log-framework.html 作为一名Java程序员,我们开发了很多Java应用程序,包括桌面应用.WEB应用 ...

  5. To be transfered

    bomb: file format elf64-x86-64 Disassembly of section .init: 0000000000400b38 <_init>: 400b38: ...

  6. 帧动画FrameAnimation

    <!-- 布局 --> <item android:drawable="@drawable/girl_1" android:duration="100& ...

  7. Kefa and Park

    #include<bits/stdc++.h> #define max 100005 using namespace std; int cats[max]; vector<int&g ...

  8. 贪心 POJ 2586 Y2K Accounting Bug

    题目地址:http://poj.org/problem?id=2586 /* 题意:某公司要统计全年盈利状况,对于每一个月来说,如果盈利则盈利S,如果亏空则亏空D. 公司每五个月进行一次统计,全年共统 ...

  9. 不容易系列之(4)——考新郎[HDU2049]

    不容易系列之(4)——考新郎 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  10. BZOJ3743 : [Coci2014]Kamp

    d[x][0]表示x点向下走且回到x点的最少代价 d[x][1]表示x点向下走但不回到x点的最少代价 d[x][2]表示x点向下走的最长路 d[x][3]表示x点向下走的次长路 u[x][0]表示x点 ...