入门

HTML
引用 Masonry 文件

<script src="/js/masonry.pkgd.min.js"></script>
<div class="grid">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    ...
 </div>

CSS
所有项目大小都由CSS处理。

  .grid-item { width: 220px;margin: 10px;float: left; }

用jQuery初始化
你可以使用Masonry作为jQuery插件： $('selector').masonry();

  $('.grid').masonry({
     // options
     itemSelector: '.grid-item',
     columnWidth: 240
  });

更多参数：

 $(function(){
   $('.grid').masonry({
     // options 设置选项
     itemSelector : '.item', //子类元素选择器
     columnWidth : 240 ,//一列的宽度 ，包括边距 220+10+10
     isAnimated:true, //使用jquery的布局变化，是否启用动画效果
     animationOptions:{
     //jquery animate属性 ，动画效果选项。比如渐变效果 Object { queue: false, duration: 500 }
     },
     gutterWidth:15,//列的间隙
     isFitWidth:true,//自适应宽度
     isResizableL:true,// 是否可调整大小
     isRTL:false,//使用从右到左的布局
   });
 });

图片加载完后再调用：

 var $grid = $('.grid');
 $grid.imagesLoaded(function(){
    $grid.masonry({
       itemSelector : '.item',
       columnWidth : 240
    });
  });

官网下载：
http://masonry.desandro.com/