[JQuery Masonry] 輕鬆佈置瀑布流

JQuery Masonry : http://masonry.desandro.com/
這是一個可以幫您快速建置瀑布流呈現的套件

以 pinterest 為例

瀑布流佈景可分為佈景主框跟項目

佈置方式就如以下code:
<div id='container'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    ...
</div>

然後載入masonry js套件，使用jquery 1.6 之後的版本

在 item css 設定上需要設定 float 的設定

如:
<style>
.item {
    float: left;
}
</style>

然後於js 呼叫 masonry function

$('#container').masonry({
    itemSelector : '.item' < 項目選擇主要針對你設定的 class name 進行選擇
})

這樣即可製作出瀑布流佈景

如要在已有佈景內加入新項目，可以透過 masonry 的 appended 方法

var $obj = (jquery 物件)
$('#container').append( $obj ).masonry( 'appended', $obj );

如要在已有佈景，重新排版，可以透過 masonry 的 reload 方法

$('#container').masonry('reload')

想知道更詳細的教學可以至 masonry 官網相關資訊