一般都會把masonry和infinitescroll聯合使用

基本：

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script src="jquery.infinitescroll.min.js" type="text/javascript"></script>
<script src="jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $container = $('#content ul'); //設定容器
$('#content ul').infinitescroll({   
    navSelector  : "div.page .pages",  //導航的選擇器
    nextSelector : "div.page .pages a.nextpage",  //包含下一頁連結的選擇器
    itemSelector : "#content ul li"  //你將要取回的選項(內容塊)
  }, function( newElements ) {
  //程式執行完的回撥函式
  var $newElems = $( newElements );
  $container.masonry( 'appended', $newElems );
  });
   $('#content').masonry({
    itemSelector : '#content li', //子類元素
    columnWidth : 251 //一列的寬度
  });
});
</script> 
 

例項1：載入10頁後停止，出現大分頁數字

<script type="text/javascript">
function item_masonry(){ 
	$('.item img').load(function(){ 
		$('.infinite_scroll').masonry({ 
			itemSelector: '.masonry_brick',
			columnWidth:226,
			gutterWidth:15								
		});		
	});
		
	$('.infinite_scroll').masonry({ 
		itemSelector: '.masonry_brick',
		columnWidth:226,
		gutterWidth:15								
	});	
}

$(function(){

	item_masonry(); 

	$('.item').fadeIn();

	var sp = 1
	
	$(".infinite_scroll").infinitescroll({
		navSelector  	: "#more",
		nextSelector 	: "#more a",
		itemSelector 	: ".item",
		
		loading:{
			img: "images/masonry_loading_1.gif",
			msgText: ' ',
			finishedMsg: '木有了',
			finished: function(){
				sp++;
				if(sp>=10){ //到第10頁結束事件
					$("#more").remove();
					$("#infscr-loading").hide();
					$("#page").show();
					$(window).unbind('.infscr');
				}
			}	
		},errorCallback:function(){ 
			$("#page").show();
		}
		
	},function(newElements){
		var $newElems = $(newElements);
		$('.infinite_scroll').masonry('appended', $newElems, false);
		$newElems.fadeIn();
		item_masonry();
		return;
	});

});
</script>
 

<div class="item_list infinite_scroll">
	<div class="item masonry_brick">...</div>
        ......
</div>

<div id="more"><a href="p2.html"></a></div>

<div id="page" class="page" style="display:none;">
	<div class="page_num">
		<span class="unprev"></span>
		<span class="current">1</span>
		<a href="p11.html"> 2 </a>
		<a href="p21.html"> 3 </a>
		<a href="p31.html"> 4 </a>
		<a href="p41.html"> 5 </a>
		<span class="etc"></span>
		<a href="p111.html">12</a>
		<a href="#" class="next"></a>
	</div>
</div>
 

<script>
  $(function(){
    
    var $container = $('#container');
    
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 100
      });
    });
    
    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.box',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( 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 ); 
        });
      }
    );
    
  });
</script>

<div id="container">
   <div class="box col3">...</div>
   <div class="box col1">...</div>
   <div class="box col2">...</div>
   ......
</div>

<nav id="page-nav">
  <a href="../pages/2.html"></a>
</nav>