// infinitescroll() is called on the element that surrounds

 // the items you will be loading more of

   $('#content').infinitescroll({

     navSelector  : "div.navigation",

                    // selector for the paged navigation (it will be hidden)

     nextSelector : "div.navigation a:first",

                    // selector for the NEXT link (to page 2)

     itemSelector : "#content div.post"

                    // selector for all items you'll retrieve

   });

 // usage:

 // $(elem).infinitescroll(options,[callback]);

 // infinitescroll() is called on the element that surrounds

 // the items you will be loading more of

 $('#content').infinitescroll({

   navSelector  : "div.navigation",

                  // selector for the paged navigation (it will be hidden)

   nextSelector : "div.navigation a:first",

                  // selector for the NEXT link (to page 2)

   itemSelector : "#content div.post",

                  // selector for all items you'll retrieve

   debug        : true,

                  // enable debug messaging ( to console.log )

   loadingImg   : "/img/loading.gif",

                  // loading image.

                  // default: "http://www.infinite-scroll.com/loading.gif"

   loadingText  : "Loading new posts...",

                  // text accompanying loading image

                  // default: "<em>Loading the next set of posts...</em>"

   animate      : true,

                  // boolean, if the page will do an animated scroll when new content loads

                  // default: false

   extraScrollPx: 50,

                  // number of additonal pixels that the page will scroll

                  // (in addition to the height of the loading div)

                  // animate must be true for this to matter

                  // default: 150

   donetext     : "I think we've hit the end, Jim" ,

                  // text displayed when all items have been retrieved

                  // default: "<em>Congratulations, you've reached the end of the internet.</em>"

   bufferPx     : 40,

                  // increase this number if you want infscroll to fire quicker

                  // (a high number means a user will not see the loading message)

                  // new in 1.2

                  // default: 40

   errorCallback: function(){},

                  // called when a requested page 404's or when there is no more content

                  // new in 1.2                   

   localMode    : true

                  // enable an overflow:auto box to have the same functionality

                  // demo: http://paulirish.com/demo/infscr

                  // instead of watching the entire window scrolling the element this plugin

                  //   was called on will be watched

                  // new in 1.2

                  // default: false

     },function(arrayOfNewElems){

      // optional callback when new content is successfully loaded in.

      // keyword `this` will refer to the new DOM content that was just added.

      // as of 1.5, `this` matches the element you called the plugin on (e.g. #content)

      //                   all the new elements that were found are passed in as an array

 });

 // load all post divs from page 2 into an off-DOM div

 $('

 ').load('/page/2/ #content div.post',function(){

     $(this).appendTo('#content');    // once they're loaded, append them to our content area

 });

             $('#waterfall').infinitescroll({

                 navSelector: "#navigation", //导航的选择器，会被隐藏

                 nextSelector: "#navigation a", //包含下一页链接的选择器

                 itemSelector: ".wfc", //你将要取回的选项(内容块)

                 debug: true, //启用调试信息

                 animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有

                 extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150

                 bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短

                 errorCallback: function() {

                     alert('error');

                 }, //当出错的时候，比如404页面的时候执行的函数

                 localMode: true, //是否允许载入具有相同函数的页面，默认为false

                 dataType: 'html',//可以是json

 //                template: function(data) {

 //                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数

 //                    return '';

 //                },

                 loading: {

                     msgText: "加载中...",

                     finishedMsg: '没有新数据了...',

                     selector: '.loading' // 显示loading信息的div

                 }

             }, function(newElems) {

                 //程序执行完的回调函数

                 var $newElems = $(newElems);

                 $('.wrapper:eq(1)').masonry('appended', $newElems);

             });

 $(function(){

  $('#container').masonry({

  // options 设置选项

  itemSelector : '.item', //子类元素选择器

  columnWidth : 240 ,//一列的宽度 ，包括边距 220+10+10

  isAnimated:true, //使用jquery的布局变化，是否启用动画效果

  animationOptions:{

  //jquery animate属性 ，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }

  },

  gutterWidth:0,//列的间隙

  isFitWidth:true,//自适应宽度

  isResizableL:true,// 是否可调整大小

  isRTL:false,//使用从右到左的布局

  });

  }); 

 $(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 //一列的宽度

   });

 });

当需要排列图片div时：

需要调用：

<script>

var $container = $('#container');

$container.imagesLoaded(function(){

  $container.masonry({

    itemSelector : '.item',

    columnWidth : 240

  });

});

</script>

调用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )

例如：

.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布

局.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态

.masonry( 'layout', $items, callback )// 指定项目的布局

.masonry( 'option', options ) //设置option

.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序

.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版

.masonry( 'remove', $items ) //从masonry实例或dom中移除项目

调用infinitescroll插件：

$container.infinitescroll({

        navSelector : '#page-nav', //分页导航的选择器

        nextSelector : '#page-nav a', //下页连接的选择器

        itemSelector : '.box', //你要检索的所有项目的选择器

        loading: {

                finishedMsg: 'No more pages to load.',//结束显示信息

                img: 'http://i.imgur.com/6RMhx.gif'//loading图片

        }

},

//作为回调函数触发masonry

function( newElements ) {

// 当加载时隐藏所有新项目

        var $newElems = $( newElements ).css({ opacity: 0 });

// 在添加到masonry布局之前保证图片载入

        $newElems.imagesLoaded(function(){

// 现在可以显示所有的元素了

        $newElems.animate({ opacity: 1 });

        $container.masonry( 'appended', $newElems, true );

        });

}

);