【JQ】瀑布流与无限滚动条一起使用，双剑合璧

一般都会把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>

实例2：masonry官网上的例子http://masonry.desandro.com/demos/infinite-scroll.html

<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>