mass Framework的瀑布流UI控件，比强大多了，从项目代码中抽取出来的东西，实用性满点。
瀑布流通常分为三部分，容器，栏栅，砖块。砖头里面基本上都塞着一张大图，本来瀑布流就是以图片来吸引眼球的。网上绝对大多数瀑布流都是通过绝对定位来设置砖头的位置，但这也非常依赖于后端的支持，除去图片的裁剪不说，一定要把图片的大小预先给出来，然后前端要通过复杂的计算求得它在瀑布的top与left。万一有一天PM要实现即时删除某一砖头的功能，那么这重排的计算量就大了。因此我的瀑布流有如下优点，浮动布局，对后端依赖极小。
本控件依赖于我的ejs模板，藉此将后端传过来的JSON数据变成HTML数据，然后通过addTiles方法，将HTML数据变成元素节点。
由于是使用浮动布局，因此必须在瀑布的容器上添加clearfix这个著名的清除浮动类。具体定义如下：
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {zoom:1;} 参数：
- settings
- 可选。用于配置控件对象。但当这个对象第二次调用它时， 只有当其第一个参数为字符串或对象才有效，这样相当于调用其方法或重写一些属性。
返回值：
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模板）
#waterfall{ width:1100px; background: url("http://images.cnblogs.com/cnblogs_com/rubylouvre/363259/o_waterfall_bc.jpg") repeat scroll 0 0 transparent; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {zoom:1;} .tile{ width:198px; padding:20px; margin-top:10px; border:1px solid #000; -moz-box-shadow:2px 2px 10px #c96; -webkit-box-shadow:2px 2px 10px #c96; box-shadow:2px 2px 10px #c96; background:#fff; } .tile .dis{ width:198px; } .footer{ height:24px; line-height:24px; background:gray; } $.require("ready,more/waterfall",function(){ var waterfall = $("#waterfall").waterfall({ ejs_id:"tile_tmpl", width:1100, col: 4, img_expr:".big_img", col_width:246, fade: true, callback: function(){ if(!this._first){//最开始的砖头不需要透明 var tiles = this.tiles.splice(0,5); for(var i = 0, el; el = tiles[i++];){ el.css("o",1) } this._first = true; } } }).waterfall("getUI"); waterfall.addTiles( data.splice(0,10) ) waterfall.scroll(function(rollHeight, pageHeight){ if(typeof rollHeight == "number"){ $.log(rollHeight +" "+ pageHeight); if(rollHeight + 30 > $(".footer").offset().top){ waterfall.addTiles( data.splice(0,10) ); } } }) })