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截图：

该如何使用呢，其实很简单，看下代码：

使用说明：

配置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’
});
});

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