Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流
<script type="text/javascript" src="/js/jquery/ jquery.1.7.1.min.js"></script> <script type="text/javascript" src="/js/jquery/plugin/jquery.masonry.min.js"></script> <script type="text/js" src="/scripts/jquery/plugin/jquery.infinitescroll.min.js"></script><script type="text/javascript"> var totalpage = ${result.totalPage};//这里是从服务端得到总共分页数 var readedpage = 1;//当前滚动到的页数</script><!-- page-nav 创建一个不可见对象，用于载入下一页数据入口元素点 --><nav id="page-nav"> <a href="${media_root}/billstudy/bill/question/all/null/1"></a></nav><div id="bills_main"> <div id="masonid" class="bills_conright"><#if result?exists && (result.data.size() gt 0)> <#list result.data as template> <div class="bills_piccon"> //这里是每条数据的内容 </div> </#list></#if></div> <div class="clear"></div></div> <script> $jq(function(){ var $container = $jq('#masonid'); readedpage++; if(totalpage>1){//如果总共只有一页，那就不需要滚动加载效果了 $jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage); $container.imagesLoaded(function(){ $container.masonry({ // itemSelector: '.bills_piccon' // , columnWidth: 100 }); });//这里参数可以为空，但必须要初始化masonry，否则后面会报找不到方法appended。 $container.infinitescroll({ navSelector : '#page-nav', //指定page-nav nextSelector : '#page-nav a', // page-nav下一页的链接 itemSelector : '.bills_piccon', // 要获取追加的页面元素 loading: { finishedMsg: 'No more pages to load.', img: 'http://i.imgur.com/6RMhx.gif' } }, // pathParse: ["/billstudy/bill/question/all/null/", ""], // trigger Masonry as a callback function( newElements ) { // hide new items while they are loading var $newElems = $jq( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry('appended', $newElems, true); readedpage++;//当前页滚动完后，定位到下一页 if(readedpage>totalpage){//如果滚动到超过最后一页，置成不要再滚动。 $jq("#page-nav").remove(); $container.infinitescroll({state:{isDone:true}}); }else{ //'#page-nav a置成下一页的值 $jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage); } }); });} });</script>?
?
