瀑布流组件及初始化

 

瀑布流效果图：

 

特点：

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函数可