跨境电商
经验交流分享

瀑布流布局浅析(二):KISSY.Waterfall库实现瀑布流布局的算法

本篇是瀑布流布局的第二篇文章,同样出自淘宝UED,在上一篇文章中介绍了瀑布流布局的三种方式,本文主要讲解了淘宝的开源前端库中封装的瀑布流布局类KISSY.Waterfall的实现思路及算法~~绝对精彩~~前端不容错过

KISSY.Waterfall 实现思路

KISSY 的 Waterfall 组件主要包含两个部分,一个是对现有数据块进行排列计算各自所在的位置; 二是下拉滚动时,触发加载数据操作,并把数据添加到目标容器中。

1) 数据块排列,算法步骤简述下:

  • 初始化时,对容器中已有数据块元素进行第一次计算,需要用户给定: a,容器元素 — 以此获取容器总宽度; b,列宽度; c,最小列数; 最终列数取的是容器宽度/列宽度和最小列数的最大值,这样保证了,当窗口很小时,仍然出现最小列数的数据;
  • 获得列数后,需要保存每个列的当前高度,这样在添加每个数据块时,才知道起始高度是多少;
  • 依次取容器中的所有数据块,先寻找当前高度最小的某列,之后根据列序号,确定数据块的left,top值,left 为所在列的序号乘以列宽,top 为所在列的当前高度,最后更新所在列的当前高度加上这个数据块元素的高度,至此,插入一个元素结束;
  • 当所有元素插入完毕后,调整容器的高度为各列最大的高度值,结束依次调整;
  • 性 能效率上的注意点: a,如果当前正在调整中,又触发了 resize 事件,需要将上次调整暂停后执行这次调整(见 timedChunk 函数); b,resize 触发会很频繁,可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了resize事件,但回调函数只会执行一次(见 S.buffer 函数)
  • 感兴趣的可以参见源码

2) 异步加载数据,前面讲的是如何对容器中已有元素进行排列,但很多情况下,还需要不断加载新数据块,为此专门设计了一个独立的模块 KISSY.Waterfall.Loader,其实这个功能就更简单了,仅包含两个步骤:

  • 绑定滚动事件,并确定预加载线高度值,即滚动到哪个高度后,需要去加载数据,其实这个就是列的最小高度值,这样当前滚动值和最小高度值比较一下即可判断出来,是否要触发加载数据;
  • 加 载数据,为了不对数据源做太多限制,完全由使用者自己决定数据源从哪边获取和其格式,这样更好的方便用户使用。为此,该组件只提供一个 load(success,end) 接口,怎样load 由用户自己去定义,而其中的 success/end,分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。这样真是太方便了~~
  • 感兴趣的可以参见源码

KISSY.Waterfall 示例和文档

看到这边,是不是很想试用一下~~ 嗯嗯,这里给出一些相关学习资料和示例,以供参考:

赞(0)
未经允许不得转载:锐想 » 瀑布流布局浅析(二):KISSY.Waterfall库实现瀑布流布局的算法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

锐想电商 - 跨境电商经验交流分享

锐想无限