【jQuery插件】用jQuery Masonry快速構建一個pinterest網站布局

時間：2011年03月21日作者：愚人碼頭查看次數:29,744 views評論次數：25條評論

前段時間領導給我看了一個網站：http://pinterest.com/， Pinterest 這個名字還算容易理解：「Pin」就是用圖釘往墻上釘東西，「interest」就是趣味。

通過 Pinterest ，你可以： 1) 發現有趣的圖片——設計、攝影、產品、新聞——并刺激靈感； 2) 將有趣的圖片歸類——tag、board、category、source——并分享給好友。

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

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

jQuery Masonry插件的參數也很簡單：

view source print?

01	$('#wrapper').masonry({

02

?

03	??singleMode:?false,

04	??// 禁用測量每個浮動元素的寬度。

05	??// 如果浮動元素具有相同的寬度，設置為true。

06	??// 默認： false

07

?

08	??columnWidth: 240,

09	??// 1列網格的寬度，單位為像素（px）。

10	??// 默認： 第一個浮動元素外寬度。

11

?

12	??itemSelector:?'.box:visible',

13	??// 附加選擇器，用來指定哪些元素包裹的元素會重新排列。

14

??

15

?

16	??resizeable:?true,

17	??// 綁定一個 Masonry 訪問 用來 窗口 resize時布局平滑流動.

18	??// 默認：true

19

?

20	??animate:?true,

21	??// 布局重排動畫。

22	??// 默認：false

23

?

24	??animationOptions: {},

25	??// 一對動畫選項，具體參數可以參考jquery .animate()中的options選項，見：http://www.css88.com/jqapi/#p=animate

26

?

27	??appendedContent: $('.new_content'),

28	??//? 附加選擇器元素，用來尾部追加內容。

29	??// 在集成infinitescroll插件的情況下使用。

30

?

31	??saveOptions:?true,

32	??// 默認情況下，Masonry 將使用以前Masonry使用過的參數選項,所以你只需要輸入一次選項

33	??// 默認：true

34

?

35	},??function() {}

36	??// 可選擇的回調函數

37	??// 'this'將指向重排的Masonry適用元素

38

);

?

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

總結

以上是生活随笔為你收集整理的【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。