mass Framework waterfall（瀑布流）插件

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

        <script type="text/tmpl" id="tile_tmpl">
                <div class="tile">
                     <img src="<&= @img_src &>" class="big_img" />
                     <div class="dis" ><&= @title &></div>
                </div>
        </script>
        <div id="waterfall" class="clearfix"></div>
        <div class="footer">这是页脚</div>
            

         $.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) );
                        }
                    }
                })
            })
            

这是页脚