转自：http://www.cnblogs.com/irelands/archive/2012/04/16/2451262.html

首先在页面中引入

 
  
  1. <script src="jquery-1.7.1.min.js"></script> 
  2. <script src="jquery.masonry.min.js"></script> 
  3. <script src="jquery.infinitescroll.js"></script> 
 
  
排列body中的内容:
 
  
 
  
  1. <body>     
  2.        <div id="container"> 
  3.        <div class="item">a a a a a  a</div> 
  4.        <div class="item">a a a a a  a</div> 
  5.        <div class="item">a a a a a  a</div> 
  6.        <div class="item">a a a a a  a</div> 
  7.    
  8.   </div> 
  9.  </body> 
 
  
在js中调用插件：
 
  
 
  
  1. <script type="text/javascript"> 
  2.    $(function(){  
  3.      $('#container').masonry({  
  4.        // options 设置选项  
  5.        itemSelector : '.item',//class 选择器  
  6.        columnWidth : 240 ,//一列的宽度 Integer  
  7.            isAnimated:true,//使用jquery的布局变化  Boolean  
  8.            animationOptions:{  
  9.              //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }  
  10.            },  
  11.            gutterWidth:0,//列的间隙 Integer  
  12.            isFitWidth:true,// 适应宽度   Boolean  
  13.            isResizableL:true,// 是否可调整大小 Boolean  
  14.            isRTL:false,//使用从右到左的布局 Boolean  
  15.    });  
  16.  });  
  17.  </script> 
 
  
当需要排列图片div时：
需要调用：
 
  
 
  
  1. <script> 
  2.  var $container = $('#container');  
  3.  $container.p_w_picpathsLoaded(function(){  
  4.    $container.masonry({  
  5.      itemSelector : '.item',  
  6.      columnWidth : 240  
  7.    });  
  8.  });  
  9.  </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插件：
 
  
 
 
  
 
  
  1. $container.infinitescroll({  
  2.          navSelector : '#page-nav', //分页导航的选择器  
  3.          nextSelector : '#page-nav a', //下页连接的选择器  
  4.          itemSelector : '.box', //你要检索的所有项目的选择器  
  5.          loading: {  
  6.                  finishedMsg: 'No more pages to load.',//结束显示信息  
  7.                  img: 'http://i.imgur.com/6RMhx.gif'//loading图片  
  8.          }  
  9.  },  
  10.  //作为回调函数触发masonry  
  11.  function( newElements ) {  
  12.  // 当加载时隐藏所有新项目  
  13.          var $newElems = $( newElements ).css({ opacity: 0 });  
  14.  // 在添加到masonry布局之前保证图片载入  
  15.          $newElems.p_w_picpathsLoaded(function(){  
  16.  // 现在可以显示所有的元素了  
  17.          $newElems.animate({ opacity: 1 });  
  18.          $container.masonry( 'appended', $newElems, true );  
  19.          });  
  20.  }  
  21.  );