瀑布流布局神器——JQuery Masonry
网址：http://masonry.desandro.com/index.html

jQuery Masonry是一个构建瀑布流布局的一个jQuery插件，通过它可以轻松使页面元素通过绝对定位实现瀑布流布局。

1\ 标记需要布局的容器和Item
Masonry需要一个容器来装载结构类似的子元素

<div id="container">  
  <div class="item">...</div>  
  <div class="item">...</div>  
  <div class="item">...</div>  
  ...  
</div> 

然后在页面中添加Jquery和Masonry脚本引用，要求jquery版本在1.6+

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  
<script src="/path/to/jquery.masonry.min.js"></script>  

2\编写CSS
所有需要布局的元素大小由CSS来确定，所有元素必须是浮动的

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

 
3\编写脚本
编写脚本传入初始化布局参数，让容器自动布局。
强烈推荐配置itemSelector和columnWidth两个参数。更多参数配置请查阅官网。

$(function(){  
  $('#container').masonry({  
    // options  
    itemSelector : '.item',  
    columnWidth : 240  
  });  
});

OK，到此结束。So easy~

以下是更多参数介绍：

$('#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选项

  appendedContent: $('.new_content'),
  //  附加选择器元素，用来尾部追加内容。
  // 在集成infinitescroll插件的情况下使用。

  saveOptions: true,
  // 默认情况下，Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
  // 默认：true

},  function() {}
  // 可选择的回调函数
  // 'this'将指向重排的Masonry适用元素
);

更多参数介绍可以参考官方网站： http://masonry.desandro.com/docs/options.html

25个通过本插件实现的网页效果： 《25 Powerful Examples of Masonry jQuery Web Design》
 http://smashinghub.com/25-powerful-examples-of-masonry-jquery-web-design.htm