【jQuery插件】用于瀑布式布局(砖块)的插件jquery Masonry

最近做项目用到了这个插件,很方便也很强大,与大家分享一下:

看了下面这张对比图你就知道它的用途

jquery瀑布式布局插件Masonry

国内的花瓣网拼范网也用到了这种效果。

调用方法:

 

$(‘#wrapper’).masonry({
singleMode: false,
// 禁用测量每个浮动元素的宽度。
// 如果浮动元素具有相同的宽度,设置为true。
// 默认: false
columnWidth: 240,
// 1列网格的宽度,单位为像素(px)。
// 默认: 第一个浮动元素外宽度。
itemSelector: ‘.box:visible’,
// 附加选择器,用来指定哪些元素包裹的元素会重新排列。
resizeable: true,
// 绑定一个 Masonry 访问 用来 窗口 resize时布局平滑流动.
// 默认:true
animate: true,
// 布局重排动画。
// 默认:false
animationOptions: {},
appendedContent: $(‘.new_content’),
// 附加选择器元素,用来尾部追加内容。
// 在集成infinitescroll插件的情况下使用。
saveOptions: true,
// 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
// 默认:true
}, function() {}
// 可选择的回调函数
// ‘this’将指向重排的Masonry适用元素
);

问:ajax请求一段数据后布局重叠了怎么办?
答:只要使用插件中的’reload’方法即可。
例:
$(str).append(‘#container’);
$(‘#container’).masonry({‘reload’});

演示Demo:http://lovew3c.com/demo/masonry.html

更多使用方法请参考官方手册

转载请注明:董江浩的博客 » 【jQuery插件】用于瀑布式布局(砖块)的插件jquery Masonry

posted @ 2011-12-29 11:18  shoupifeng  阅读(1201)  评论(2编辑  收藏  举报