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