瀑布流+无限滚动加载数据
瀑布流带图片,先加载图片,后布局,再滚动加载。
所需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/