jQuery Masonry构建类pinterest网站布局

内容摘要
一打开Pinterest你会被那些漂亮的图片和网站的杂志风格所吸引。非常强的视觉冲击。
文章正文

一打开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适用元素
);
代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!