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

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

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

firefox下的问题

1、支持中文输入： （在IE等非firefox浏览器下可以准确的匹配中文字符，但firefox下却没有任何匹配，该方案里利用firefox的oninput事件来修正hack一下，解决！）
修改199行处：

  }).bind("unautocomplete", function() {
    select.unbind();
    $input.unbind();
    $(input.form).unbind(".autocomplete");
}).bind("input", function() {
   // @hack by liqt:support for inputing  chinese characters  in firefox
   onChange(0, true);
});
       

2、支持多次回车选定：（同样的看注释就可以了，除了opera，firefox 3.0以上在支持多回车上的“keydown”会有问题，与opera一样用‘keypress’解决！）
修改91行：

// only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {

修改为：

// only opera mozilla doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
$input.bind((($.browser.opera || $.browser.mozilla) ? "keypress" : "keydown") + ".autocomplete", function(event) {

autocomplete 接受参数改进：

原始设计中autocomplete数据源只能是json数组，对象或者经过ajax返回的json数组的url，现改进一些，允许其接受一个函数对象，并且在该函数内处理。代码如下：

var isUrl = typeof urlOrData == "string"||typeof urlOrData == "function"; // 加入函数支持，也当url处理，最小化修改代码

//在第340几行function request(term, success, failure)内部加入函数处理的分支

.....
}else if(typeof(options.url) == "function"){
         options.url.apply(null,[term,function(data){
	if (data != null && data.length > 0) {
	found = true;
	var parsed = options.parse && options.parse(data) ||parse_json(data);
	// set autocActive to true, to open auto active when user are typing.
	success(term, parsed);
	return;
	}
         }]);
   }
.......

调用Google API的代码库，可以有效的减少自己站上的流量。比如Jquery，gzip后有19K，调用Google Api，不仅省去了流量，如果大家的网站都这么做的话，由于缓存原因，很多网站用到的话，就不需要重复加载了，非常节省资源，和加载时间。

采用Ajax动态加载google的API中jquery库的代码是这样的：

之所以采用www.google.com.tw（这里也可以更换成其他域名如google.de,google.jp之类的）是因为www.google.com有时会不稳定，就会导致加载此代码的页面打不开。实际上如果你只用到jquery的话，根据firebug（火狐下插件）给出的实际地址，也可以直接向下面这样引入jquery库。