瀑布流+无限滚动加载数据
瀑布流带图片，先加载图片，后布局，再滚动加载。
所需js有jquery，jquery.masonry.js，jquery.infinitescroll.min.js
<script type="text/javascript" src="__JS__/jquery.masonry.min.js"></script>
<script type="text/javascript" src="__JS__/jquery.infinitescroll.min.js"></script>
<div class="renqi_container">
<div class="renqi_body">
<div id="container" class="transitions-enabled infinite-scroll clearfix masonry" >
<include file="Index/renqi_lists" />
</div>
</div>
<div class="page_box">
<div class="page">
<div class="list_page" style="display:none">{$_page}</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 5 //每两列之间的间隙为5像素
});
$container.infinitescroll({
navSelector : '.list_page', //指定page-nav
nextSelector : '.list_page a', // page-nav下一页的链接
itemSelector : '#container', // 要获取追加的页面元素
//debug: true, //启用调试信息
loading: {
msgText : "加载中...",
finishedMsg: '没有更多的页面可以加载.',
img: '__IMG__/loading.gif'
}
},function(newElements ){
$container.infinitescroll({state:{isDuringAjax:true}});
var $newElems = $(newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
$container.infinitescroll({state:{isDuringAjax:false}});
});
});
});
});
</script>
infinitescroll插件官网http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
