瀑布流组件及初始化

 

瀑布流效果图：

 

特点：

1.数据异步请求；

2.图片不用算高度，可以定宽，等比例缩放；

3.可以用页码组件来分页

4.兼容ie678、FF、chrome等主流浏览器

 

kissy本身组件库里有瀑布流(http://docs.kissyui.com/1.2/docs/html/demo/component/waterfall/demo2.html )，但是对于图片尺寸的处理，定宽等比缩放的话，需要预先知道图片尺寸，所以自己写了一个不依赖图片尺寸生成的瀑布流组件。

 

 

用法：

 

1.先引入组件

<script src="http://a.tbcdn.cn/??s/kissy/1.1.6/kissy-min.js,p/global/1.0/global-min.js" ></script>

KISSY.add({
        'waterfall': {
            fullpath:"waterfall.js",//组件路径
            cssfullpath:"waterfall.css"//这个需要自己根据视觉稿自己写，也可直接引入在页面里
        }
    });
KISSY.use("waterfall,ajax", function(S, Waterfall, io) {
var _A = S.all,D = S.DOM,_O = S.one,E = S.Event,UA = S.UA;
 //这里写初始化代码
}

 

2.初始化代码

new S.Waterfall("#ColumnContainer", //容器选择器
{
    load : function(requestSuccess, end) {//异步请求发送，请求成功后的html片段集合用requestSuccess渲染, end函数可以用于停止发送请求
        S.ajax({
            url : url,//数据接口
            dataType : "jsonp",
            jsonp : "jsoncallback",
            success : function(d) {
                var data = d.data;
                var items = [];//此处用的kissy里的模板引擎生成的html片段，都压入items
                for(var i = 0; i < data.length; i++) {
                    var item = new S.Node(tpl.render(data[i]));
                    //把一次请求的各项生成一系列对应html片段
                    items.push(item);
                }
                requestSuccess(items, "#ColumnContainer");
            }
        });
    },
    colCount : 4,//瀑布流的列数
    colWidth : 222//瀑布流的一列的宽度
});

 

组件源码如下：

 

KISSY.add("waterfall", function(S) {
    var D = S.DOM,E = S.Event,UA = S.UA;
    function Waterfall(container, config) {
        var self = this;
        if(S.isString(container)) {
            self.container = D.get(container);
        }
        if(!container) {
            S.log('请配置正确的id.');
            return;
        }
        self._init(config || {});
    }
    S.augment(Waterfall, {
        _init: function(config){
            var self = this;
            window.isEnd = false;
            self._bindParam(config);
            self._bindStructure();
            self._bindEvent();
        },
        _bindParam: function(o){//配置参数
            var self = this;
            self.load = (typeof o.load == 'undefined' || o.load == null || typeof o.load != 'function') ? false : o.load;
            self.colCount = (typeof o.colCount == 'undefined' || o.colCount == null) ? false : parseInt(o.colCount);
            self.colWidth = (typeof o.colWidth == 'undefined' || o.colWidth == null) ? false : parseInt(o.colWidth);
            if(!(self.load && self.colCount && self.colWidth)){
                alert('param error!');
                return; 
            }
        },
        _bindStructure: function(){//渲染几列结构
            var self = this;
            var conWidth = D.width(self.container);
            var marginValue = parseInt((conWidth - self.colWidth*self.colCount)/(self.colCount - 1));
            marginValue = marginValue >= 0? marginValue : 0;
            var structure = '';
            for(var i = 0; i < self.colCount; i++){
                if(i == self.colCount - 1){
                    structure += '<div class="J_brook" style="float:left;width:'+ self.colWidth +'px;"></div>'
                }else{
                    structure += '<div class="J_brook" style="float:left;margin-right:'+ marginValue +'px;width:'+ self.colWidth +'px;"></div>';
                }
            }
            D.append(D.create(structure), self.container);
        },
        isGetBottom: function(){//判断是否滚动条达到底部临界点
            /********************   
            * 取窗口滚动条高度    
            ******************/    
            function getScrollTop(){     
                var scrollTop=0;     
                if(document.documentElement&&document.documentElement.scrollTop){     
                    scrollTop=document.documentElement.scrollTop;     
                }else if(document.body){     
                    scrollTop=document.body.scrollTop;     
                }     
                return scrollTop;     
            }     
            /********************   
            * 取窗口可视范围的高度    
            *******************/    
            function getClientHeight(){     
                var clientHeight=0;     
                if(document.body.clientHeight&&document.documentElement.clientHeight){     
                    var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;             
                }else{     
                    var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;         
                }     
                return clientHeight;     
            }     
                
            /********************   
            * 取文档内容实际高度    
            *******************/    
            function getScrollHeight(){ 
                return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);     
            }
            if(getScrollTop()+getClientHeight() >= getScrollHeight() - 400){
                return true;
            }     
            return false;
        },
        success: function(items, container){//把一次请求来的多项依次渲染
            function getShortBrook(){//获取最小溪流
                var sBrook;
                var brooks = D.query(container+' .J_brook');
                for(var i = 0; i < brooks.length; i++){
                    if(!sBrook){
                        sBrook = brooks[i];
                    }else if(D.height(brooks[i]) < D.height(sBrook)){
                        sBrook = brooks[i];
                    }
                }
                return sBrook;
            }
            function showItems(items){
                var num = 0,maxNum = items.length;
                showItem(items,num);
                function showItem(items, num){
                    function delay(items, num){
                        return function(){
                            var con = getShortBrook();
                            D.css(items[num], 'opacity', '0');
                            D.append(items[num], con);
                            new S.Anim(items[num] , {'opacity' : '1'} , 2 , 'easeOut').run();
                            num++;
                            if(num < maxNum){
                                showItem(items, num);
                            }
                            if(items[num-1] == items[num]){
                                alert('error')
                            }
                        }
                    }
                    var dl = setTimeout(delay(items, num), 0);
                }
            }
            showItems(items);
        },
        end: function(){//停止异步请求
            window.isEnd = true;
            E.remove(window, 'scroll');
        },
        _bindEvent: function(){//绑定事件
            var self = this;
            E.on(window, 'scroll', function(e){
                if(!self.isGetBottom())return;//滚动条未达到页尾则返回
                self.load(self.success, self.end);
                E.remove(window, 'scroll');
                setTimeout(function(){
                    self._bindEvent();
                },2000);
                
            });
            self.load(self.success, self.end);
        }
   });
   S.Waterfall = Waterfall;
   return Waterfall;
});

 

 附件中是瀑布流源码供下载，欢迎建议指点~！

 

评论

1 楼 入人之间 2012-07-09  

感谢楼主分享！学习中~~