【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_34077371

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xingmeng/p/3375821.html

本文介绍如何使用jQueryMasonry插件快速构建类似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插件的参数也很简单：

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);