瀑布流通常分为三部分，容器，栏栅，砖块。砖头里面基本上都塞着一张大图，本来瀑布流就是以图片来吸引眼球的。网上绝对大多数瀑布流都是通过绝对定位来设置砖头的位置，但这也非常依赖于后端的支持，除去图片的裁剪不说，一定要把图片的大小预先给出来，然后前端要通过复杂的计算求得它在瀑布的top与left。万一有一天PM要实现即时删除某一砖头的功能，那么这重排的计算量就大了。因此我的瀑布流有如下优点，浮动布局，对后端依赖极小。
本控件依赖于我的ejs模板，藉此将后端传过来的JSON数据变成HTML数据，然后通过addTiles方法，将HTML数据变成元素节点。
由于是使用浮动布局，因此必须在瀑布的容器上添加clearfix这个著名的清除浮动类。具体定义如下：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {zoom:1;}
参数：
返回值：
mass实例
settings的配置参数：
- img_expr:必需，砖块里面的大图的CSS表达式，用于在其加载完毕后添加下一个砖头。
- col:必需，瀑布流里一共多少列(栏栅)。
- col_width:必需，栏栅的宽，注意其值必须比砖块大。
- ejs_id:必需，砖块的模板的ID值。
- callback:当所有砖头添加完毕后触发的回调，this指向UI实例。
- width:容器的宽，如果没有指定，会直接取ui.target.width()作为它的值。
- interval:瀑布流会在window上绑定一个scroll事件, 这是滚轮每隔多少毫秒触发一次回调。默认是20
- fade:是否使用淡入效果,如果是它会在添加时就把其透明值设为零,然后在scroll事件时,当滚动条拖到此砖块的位置时就开始淡入动画。默认为false.
- fade_time:淡入动画的持续时间。默认是500。
生成的瀑布流拥有以下方法，都是使用$(expr).waterfall(method,args1,args2,args3)的形式进行调用，或者通waterfall(“getUI”)取得实例后再调用它们。
- addTiles(json): 添加一组砖块，json这是一个对象数组。
- addTile(html, htmls ,index )，添加砖块。html为htmls中的第一个元素，html是上面json数组用ejs模板经过转换后成为一个字符串数组。index表示添加到第几列中去。
- getShortestColumn(): 此方法通常是被addTile内部调用，求得最短的栏栅的索引值，以方便添加的新的砖块。
- scroll(callback): 绑定scroll事件到window，如果fade为true，请务必执行此方法，即使不传参也行。 callback在滚动时会多次触发，传参的参数并不一样。一种情况是某一个砖块出现到滚动条的拖动块的位置时，这时传参是el（砖块，一个mass实例）。 另一种情况是用于判定滚动条是否接近页面底部（放便使用AJAX加载下一批数据），传参数据为rollHeight（滚过的距离）, pageHeight（页面高）
- destory(): 销毁实例，移除动态添加的节点。
生成的UI实例拥有以下属性。
- parent: 即$(expr)。
- target:同上。
- cols: 动态生成的列的集合，一个对象数组，里面都是栏栅的mass实例。
- tiles: 动态生成的砖块的集合，一个对象数组，里面都是砖块的mass实例（内容参考ejs模板）
原文链接：https://www.cnblogs.com/rubylouvre/archive/2012/03/15/2397039.html
