jQuery Masonry 是一款很方便制作瀑布流的插件，下面详细介绍下，这块插件的用法。

CSS：

.list { width:1000px; margin:0 auto; list-style:none; }
.list li { display:inline; margin:0 10px 20px 0; padding:6px; border:1px #DDD solid; }

HTML:

<ul class=”list”>
  <li><img src=”images/1.jpg” alt=”” /></li>
  <li><img src=”images/2.jpg” alt=”” /></li>
  <li><img src=”images/3.jpg” alt=”” /></li>
  <li><img src=”images/4.jpg” alt=”” /></li>
  <li><img src=”images/5.jpg” alt=”” /></li>
  <li><img src=”images/6.jpg” alt=”” /></li>
  <li><img src=”images/7.jpg” alt=”” /></li>
</ul>

js:

<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.masonry.min.js”></script>
<script>
 $(function(){
    $(‘.list’).masonry({
      itemSelector: ‘.list li’
    });
  });
</script>

这样瀑布流效果姐完成了。

下面是 jQuery Masonry 的详细用法

$(‘#wrapper’).masonry({
singleMode: false,     // 禁用测量每个浮动元素的宽度。如果浮动元素具有相同的宽度，设置为true。 默认： false
columnWidth: 240,     // 1列网格的宽度，单位为像素（px）。 默认： 第一个浮动元素外宽度。
itemSelector: ‘.box:visible’,  // 附加选择器，用来指定哪些元素包裹的元素会重新排列。
resizeable: true,// 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动. // 默认：true
animate: true,// 布局重排动画。默认：false
animationOptions: {},// 一对动画选项，具体参数可以参考jquery .animate()中的options选项，见：http://www.css88.com/jqapi/#p=animate
appendedContent: $(‘.new_content’),//附加选择器元素，用来尾部追加内容。在集成infinitescroll插件的情况下使用。
saveOptions: true,// 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项, 默认：true
 function() {} // 可选择的回调函数,’this’将指向重排的Masonry适用元素
});