jQuery Masonry Plugin - 版型工具

應用網站: http://pinterest.com/

Masonry 官網

由下圖即可看出, 使用 Masonry 的差異了.

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適用元素
);