html页面
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<div id="container" class=" container">
<volist name="list" id="vo">
<div class="item" style="height:230px;">
{$vo.title}
<input type="hidden" name="id" value="{$vo.id}"/>
</div>
</volist>
</div>
<div id="loading" class="loading-wrap">
<span class="loading">加载中，请稍后...</span>
</div>
<div class="footer"><center>我是页脚</center></div>
<script type="text/javascript">
$(function(){
//执行瀑布流
var $container = $('#container');
$container.masonry({
itemSelector : '.item',
isAnimated: true
});
var loading = $("#loading").data("on", false);
$(window).scroll(function(){
if(loading.data("on")) return;
if($(document).scrollTop() >
$(document).height()-$(window).height()-$('.footer').height()){
//加载更多数据
loading.data("on", true).fadeIn();
$.get(
"{:U('Index/getDbMore')}",
{"last_id" : $("#container>div:last>input").val()},
function(data){
var html = "";
if($.isArray(data)){
for(i in data){
html += "<div class="item" style="height:230px;">"+data[i]['title']+"";
html += "<input type="hidden" name="id" value=""+data[i]['id']+""/></div>";
}
var $newElems = $(html).css({ opacity: 0 }).appendTo($container);
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
loading.data("on", false);
}
loading.fadeOut();
},
"json"
);
}
});
});
</script>
</body>
thinkphp控制器
//初始化数据
public function index(){
$list = M('article')->order('id DESC')->limit(10)->select();
$this->assign('list', $list);
$this->display();
}
//获取下一栏数据
public function getDbMore(){
$last_id = $this->$_GET['last_id'];
$map['id'] = array('lt', $last_id);
$list = M('article')->where($map)->order('id DESC')->limit(6)->select();
$this->ajaxReturn($list);
}
点击下载jquery.masonry.min.js文件
