最近在做一个项目，要用到之前比较流行的瀑布流布局，网上搜了一下，发现没有比较合适的插件可用(项目紧急，喜欢用现成的)，不得不自己写一个，也可能是因为需要结合后台来实现的，所以很难写出一个通用的插件给大家用(json格式，html结构都不一样)。
插件——jQuery.Waterfall
思路：
其实只要了解了整个流程，要实现这个插件也不难，大家都玩过俄罗斯方块吧，原理差不多，找到合适的地方叠上去就好了，在这里，每个块的宽度是必需给定的，然后计算出列数，再维护一个数组，存储每列的高度，往最小高度的列添加块即可。滚动时，当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据。
注意的地方：
如果瀑布流的块中包含图片，则需要事先知道图片的高度(其实就是为了要计算出整个块的高度，以便精确定位)，图片的高度可以从服务器返回，本插件是整合planeArt的一个图片预加载小插件，可以快速获取图片的宽高，无需服务器返回。
实现的功能有：
- 定义了列宽，根据页面大小自动排列
- 图片会自适应(ie6下会失真，无法解决)
- 自定义异步请求函数（返回JSON，json格式与html模板对应即可，默认格式请看demo json.js）
- 自定义html模板
用法：
$('#id').waterfall({
colWidth: 235, // 列宽
marginLeft: 15, // 每列的左间宽
marginTop: 15, // 每列的上间宽
lastId: 0, // 最后一条数据的ID
perNum: 10, // 每次获取10条数据
url: null, // 数据来源(ajax加载，返回json格式)，传入了ajaxFunc参数，此参数可省略
// 自定义异步函数, 第一个参数为成功回调函数，第二个参数为失败回调函数
// 当执行成功回调函数时，传入返回的JSON数据作为参数
ajaxFunc: null,
createHtml: null // 自定义生成html字符串函数,参数为一个信息集合，返回一个html字符串
});
其实这也不算得上一个插件，因为通用性实在不怎样，分页功能也没实现，不过可以做个参考。如果读者还有其它需求，请留言，本人会尽快完善这个插件。
欢迎加入web前端交流群（75701468） 分享您我的经验.
作者：无赖君子
链接：http://www.cnblogs.com/leolai/archive/2013/04/23/3038159.html