Ruby's Louvre

每天学习一点点算法

导航

统计

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

posted on 2012-03-15 09:10 司徒正美 阅读(...) 评论(...) 编辑 收藏