瀑布流效果图:
特点:
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; });
附件中是瀑布流源码供下载,欢迎建议指点~!