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