Waterfall.Loader

KISSY.use('waterfall',function(S,Waterfall){
    // use Waterfall.Loader
});

Configs

以上配置项都是继承自 Waterfall , 另外, 自身还有:

Methods

以上配置项都是继承自 Waterfall , 另外, 自身还有:

Class Detail

class Waterfall.Loader
Waterfall.Loader (config)
继承自 Waterfall , 异步获取数据后, 再进行排列.
Parameters:config (Object) – 配置项, 详细见下方 Configs Detail .

Note

如果你使用时, 想要自行写接口获取数据块, 可以直接使用 Waterfall ;

Configs Detail

Waterfall.config.diff

{Number} - 滚动时, 当最小高度的列超过在屏幕高度+已滚动高度+diff时, 会去加载更多数据.

Waterfall.config.load

{Function} - 用户自定义加载数据. 设置这个, 指定如何加载更多数据, 及加载数据后如何格式化成 HTML, 完全由用户自定义, 更加灵活.

他有两个参数:

  • success {Function}, 用于将新加载的数据块添加到容器中, 其参数同 addItems() ;
  • end {Function}, 用于当没有数据时, 通知组件不再触发数据加载动作, 无参数;

你可以参考如下的一种使用场景:

load:function(success, end) {
    // 当触发加载后, 发送 ajax 请求, 从外部数据源中获取数据块
    io({
        data:{
            from:S.all("#container .ks-waterfall").length
        },
        url:"data.json",
        dataType:"json",
        success:function(d) {
            // 当成功返回数据后, 根据后台数据, 判断是否还有更多数据, 这个判断标志由前后端协同好即可.
            if (d.end) {
                end();
                return;
            }

            // 拼接数据块
            var data = d.data,
                items = [];

            S.each(data, function(d) {
                var html = template.render(d);
                items.push($(html));
            });
            // 通过 success 回调, 添加 items 到当前容器中
            success(items);
        }
    });
},

Methods Detail

Waterfall.prototype.resume()
resume ()
继续开始监控 scroll 事件(随时可能会动态加载)
Waterfall.prototype.pause()
pause ()
停止监控 scroll 事件(停止动态加载)

Important

瀑布流区块中的图片请设置 display block ,否则在 firefox 中会导致区块错乱.