一打開Pinterest你會被那些漂亮的圖片和網站的雜志風格所吸引。非常強的視覺沖擊。
當然今天不是討論產品的東西，Pinterest的布局非常有意思，按照列排，寬度自適應。正好知道jquery有個叫Masonry的插件,這個插件非常合適做Pinterest類似的布局，而且非常簡單。我做了一個簡單的類似Pinterest布局的demo，html和css是Pinterest的。

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

查看demo：http://www.css88.com/demo/jquery-masonery/；

更多關于masonry的demo參見http://desandro.com/resources/jquery-masonry/