jquery Masonry瀑布流插件(转)

如果你经常网上冲浪,这样参差不齐的多栏布局,就象砖块效果砌墙一样,错落有致,是不是很眼熟啊?

这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,

让你的网页看上去更加的整齐、漂亮!

官网插件下载地址以及详解地址:

示例demo及文档说明:http://masonry.desandro.com/ (本站离线版下载)

你也可以下载打包的html文档在本地查阅:(内含jquery.masonry.min.js 和 jquery.masonry.js 和 实例)
Viewing this project locally
Via download

You can download a zip of all the flat HTML files from http://meta.metafizzy.co/files/masonry-site.zip. 本站下载

代码下载地址: https://github.com/desandro/masonry/downloads 本站下载 (里面的demo都有问题,建议还是看上面的官方demo或者本站提供的离线版)

以下是官网的实例截图:

从这2张图片中就能看到此插件的作用了把!

更鲜明的例子,chinaz.com的素材列表页也用了这个jQuery Masonry 插件

chinaz.com截图:

该如何使用呢,其实很简单,看下代码:

test1
test2
test3
test4

使用说明:

配置Masonry相当容易,只需要在jQuery脚本中的wrapping container元素中加上.masonry()方法。

multiple widths:

$(‘#wrapper’).masonry({ columnWidth: 200 });

same width

$(‘#wrapper’).masonry({ singleMode: true });

$(‘#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选项

appendedContent: $(‘.new_content’),
// 附加选择器元素,用来尾部追加内容。
// 在集成infinitescroll插件的情况下使用。

saveOptions: true,
// 默认情况下,Masonry 将使用以前Masonry使用过的参数选项,所以你只需要输入一次选项
// 默认:true

}, function() {}
// 可选择的回调函数
// ‘this’将指向重排的Masonry适用元素
);

BUG:

发现在container窗口的高度计算上,IE与firefox会出现偏差,有可能IE的计算高度比FF的大几十个像素,

图片瀑布流的简单做法:

这里只说说等宽的图片瀑布流,因为等宽的做出来的效果个人觉得比较好看,

关键是:img的设置,width:100%, 占满整个DIV层,高度height不设置,这样就可以实现了图片能根据宽度等比例缩放,不变形,

而考虑到如果没有这个JS插件失效的情况也能够正常显示,所以给每个box都添加了float:left;浮动和边距

这里的box宽度可以根据container的宽度除以你想一行出现的图片数得到估算值。

图片高度BUG修正:

由于网络传输的速度问题,当浏览器加载了dom,但是img图片还没有加载完毕,这个插件在计算图片高度和定位的时候,就会出错,在firefox和chrome中最为明显,尤其是google chrome.
原因:
在chrome浏览器下测试,在图片加载过程中,img的宽度和高度均为0,而在IE下,则浏览器先给img设定了宽度和高度,所以这个插件在IE下使用正常,但在chrome会出错。而这个插件看了官方的image demo也是如此,box层并没有动态生成一个高度值把布局撑开。

解决办法就是先让所有的图片加载完毕,才执行一次masonry()方法。

代码如下:

或者使用它自带的方法imagesLoaded,http://masonry.desandro.com/demos/images.html

var $container = $(‘#container’);

$container.imagesLoaded( function(){
$container.masonry({
itemSelector : ‘.box’
});
});

当然了,这样子的话,在加载图片的时候,你会先看到图片简单的排列而已,没有砖块瀑布流的效果,只有当所有图片加载完成后才会出现砖块效果。所以,至于以上代码加不加,就要考虑你的网站的访问速度了!

1 comment to jquery Masonry瀑布流插件(转)

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Protected by WP Anti Spam