Waterfall

Class

Class Detail

class waterfall.Waterfall
Waterfall (config)
将容器内的每个数据块进行瀑布排列.
Parameters:config (Object) – 配置项, 详细见下方 Config Attributes Detail .

Config Attributes Detail

waterfall.container

{String|HTMLElement|KISSY.Node} - 容器对象.

Note

该容器的孩子节点中, 具有 ks-waterfall class 会被自动识别为要排列的数据块元素.

waterfall.minColCount

{Number} - 最小列数, 默认为 1. 当窗口变小时, 计算得到的列数不能小于该值.

waterfall.align

{String} - 容器内元素和容器对齐方向。可取值 “left”, “center”, “right”. 默认 “center”

waterfall.effect

{Object} - 各数据块展示时的动画效果, 默认为 { effect:”fadeIn”, duration:1 }, 可取: “fadeIn”, “slideDown”, “show”, 参数含义同 Anim .

Caution

目前 waterfall 的动画效果只能用 fadeIn, 其他赞不支持!

waterfall.colWidth

{Number} - 每列的总宽度. 如果要设每列的间距, 请自行设置 margin, 而该值是指包含了 padding, width, margin 后的总宽度.

Methods Detail

waterfall.adjust()
adjust ()
调整各个数据块的位置.
waterfall.addItems()
addItems (items, callback)
在当前容器中, 添加新数据块.
Parameters:
  • items (Array<HTMLElement|KISSY.Node>) – 待添加的数据块数组
  • callback (Function) – 添加完数据后的回调函数
waterfall.destroy()
destroy ()
销毁当前对象

Events Detail

waterfall.adjustComplete()
adjustComplete (ev)
调整布局之后触发, 当页面初始时有数据块, 或改变窗口大小, 都会在调用 adjust 之后触发, 相当于 adjust 的 callback;
Parameters:ev.items (Array<KISSY.Node>) – 被调整的数据块集合
waterfall.addComplete()
addComplete (ev)
添加完数据块到容器之后触发, 针对于动态加载;
Parameters:ev.items (Array<HTMLElement|KISSY.Node>) – 被加载的新数据块