瀑布流+無限滾動加載資料

瀑布流帶圖檔，先加載圖檔，後布局，再滾動加載。

所需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/

所需js下載下傳