jQuery Masonry實際執行畫面

一個佈局套件或稱瀑布流套件，可以將它視為CSS浮動的另一面，CSS浮動式基於水平方向然後再以垂直方向對期，而使用 Masonry 則是使用網格控制網頁元素的垂直方向然後才是水平方向。類似 http://pinterest.com/ 的自動排版套件。這一個套件特別的是它有做了三個不同框架上的版本，此範例是使用jQuery的版本。

使用方法：
首先載入jQuery框架和Masonry的主程式
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/path/to/jquery.masonry.min.js"></script>

再來放入HTML的內容
<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

用CSS指定內容元件的大小
<style>
.item {
  width: 220px;
  margin: 10px;
  float: left;
}
</style>

內容是一般文字的話請使用以下片段
<script>
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});
</scirpt>

如果內容是圖片的話請使用
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){ //圖片讀取完成才執行排序
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
});
</script>

附上可用參數的表格

參數	型態	說明
animationOptions	物件	排列位置時的動畫效果.同jQuery動畫效果. 預設為{ queue: false, duration: 500 }
columnWidth	數字	每一個物件的寬度.如無指定會以第一個元素寬度.無預設值
containerStyle	物件	最上層元素的可是層級.預設為{ position: 'relative' }
gutterWidth	數字	列與列之間的距離.預設為 0
isAnimated	布林	排列時是否以動畫方式排列.預設為 false
isFitWidth	布林	間隔會取最外框寬度來計算.預設為 false
isResizable	布林	瀏覽器改變大小是否重新排列.預設為 true
isRTL	布林	排列方式是否由右上到左下.預設為 false (左上到右下)
itemSelector	字串	底下需排列的元素CLASS或標籤名稱

作者網站：http://masonry.desandro.com
檔案大小：106 KB(包含範例和所有的程式碼)
檔案下載：https://github.com/desandro/masonry
檔案備份：下載

Mootools 專案連結
Prototype 專案連結