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

2024-05-17 04:12:44

【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网站布局(转)相关推荐

用jQuery Masonry快速构建一个pinterest网站布局
用jQuery Masonry快速构建一个pinterest网站布局 [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 http://masonry.desan ...
【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局
转自:http://www.css88.com/archives/3321 前段时间领导给我看了一个网站:http://pinterest.com/, Pinterest 这个名字还算容易理解:「Pi ...
开发一款自动指向特定页面元素的jQuery插件：jQuery PointPoint
来源:tutorialzine.com 编译:GBin1.com web设计人员感觉目前他们出于一个两难的境地:他们需要创建出优美的用户界面,需要创新并且实用.有时候,尽管我们全力付 ...
jquery插件（jquery之家）的使用案列，（瀑布流的使用）非常简单
在我们使用这个插件的时候,我们只需要打开这个网址 ,非常优秀的一个jquery插件库jQuery库_jQuery之家-自由分享jQuery.html5.css3的插件库使用这个插件库 1.先引入js ...
八十九、Python的GUI系列 | 使用PyQt5 快速构建一个GUI 应用
@Author:Runsen @Date:2020/7/11 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
深度学习笔记：01快速构建一个手写数字识别系统以及张量的概念
深度学习笔记:01快速构建一个手写数字识别系统神经网络代码最好运行在GPU中,但是对于初学者来说运行在GPU上成本太高了,所以先运行在CPU中,就是慢一些. 一.安装keras框架使用管理员模式打 ...
阅读小技能：【有效地构建自己的知识体系】三步阅读法来快速构建一个知识体系的方法：1、阅读“正统”文献2、读权威的综述文章 3、学术专著阅读（培养阅读品位）
文章目录前言 I 快速构建一个知识体系 1.1 第一步:阅读`正统`文献(作品) 1.1.1 `基准线思维` 1.1.2 看哪些正统的学习材料? 1.2 第二步:就是读权威的综述文章 1.2.1 对 ...
如何使用ChatGPT快速构建一个网站模板
前端Q 我是winty,专注分享前端知识和各类前端资源,乐于分享各种有趣的事,关注我,一起做个有趣的人- 公众号点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群英文 | https:/ ...
【spring authorization server系列教程】(一)入门系列，spring authorization server简介。快速构建一个授权服务器（基于最新版本0.3.0）
系列文章目录 [spring authorization server系列教程](一)入门系列,快速构建一个授权服务器文章目录系列文章目录前言一.目前已实现的功能二.入门,一步一步快速开始构 ...

最新文章

热门文章