網頁瀑布流佈局插件Masonry

CSS3有實現相似瀑布流佈局的屬性column，可是遺憾的是這種佈局是縱向佈局而不支持橫向佈局。因此比較合適用於文字多列布局。

調用JQuery WaterFall佈局插件：http://masonry.desandro.com/

HTML其中要定義一個容器：

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

用JAVASCRIPT初始化

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

在HTML元素上初始化

<div id="container" class="js-masonry"
  data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>

使用JQuery實例化

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.item'
});

如下爲效果圖：