【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
【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插件的参数也很简单：
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/
