瀑布流布局（基于多栏列表流体布局实现）

转在前面：（淘宝UED）

3) 绝对定位。即 Pinterest ，Mark之，KISSY 采用的方式:

• 可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；
• 线上例子。

缺点:

• 须要实现知道数据块高度，若是其中包含图片，须要知道图片高度；
• JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

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 示例和文档

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

• Waterfall API 文档，相关构造器，配置项，方法都在这里；
• 示例，包含静态和动态两种。

欢迎试用和提出意见~~

2、稍稍要紧的话

跟风，尤为受pinterest的煽风点火，瀑布流如今很多人关注。我正好最近比较闲，加上有人曾在我站点提出但愿我介绍点瀑布流的东西，因此，今儿个也随下大流。

pinterest以及上面迅雷UED xwei的瀑布流demo（至少在FireFox下仍是有致命的显示bug的）都是采用的绝对定位实现的，有相对复杂的位置计算。

我一贯不喜欢吃别人嚼过的米饭，因而尝试使用另外的原理实现。我是个流体布局控，对绝对定位啊、浮动啊什么的一贯没什么好感，因而，这里要介绍的就是基于多栏列表流体布局实现的瀑布流布局效果。

大体结构、布局见下面的手绘图：

没有复杂的位置计算，不须要知道里面元素的高度以及宽度，且易理解，关键是具体实现~~

3、高潮来了：demo展现

您能够狠狠地点击这里：基于多栏列表瀑布流布局demo

欢迎各类滚动，缩放等测试。低版本IE浏览器也是兼容滴。问题嘛也是有滴，就是滚动到必定位置再F5刷新的时候，部分加载的内容有丢失，须要从新滚 动加载。这个嘛，我我的以为小小demo，不必折腾啦（实际上要实现也比较容易，改动以下：每次滚动不是append一个节点，而是连续回调直到加载到 屏幕下方。不懂什么意思？花点功夫看看JS实现原理就会明白了）~~

4、说说原理

第一次进入的时候，根据浏览器宽度以及每列宽度计算出列表个数，而后无论三七二十一，每列先加载个5张图片再说。

当滚动的时候，对每一列的底部位置作检测，若是在屏幕中或屏幕上方，则当即append一个新图片（注意：为了简化代码，提升性能，同时便于演示等，这里只append了一个）。由于，滚动时连续的，所以，咱们实际看到的效果是图片不断load出来。

当浏览器宽度改变的时候，页面上有个id为waterFallDetect空span标签，这个标签做用有两个：一是实现两端对齐效果，二是用来检测瀑布流布局是否须要刷新。

检测原理以下：
该span标签宽度与一个列表宽度一致，当浏览器宽度变小的时候，若是小到必定程度，显然，浏览器最右边的列表就会跑到下一行，把空span挤到后面去，空span发生较大的水平位移，显然，能够通知脚本，布局须要刷新；当浏览器宽度变大的时候，若是变大的尺寸超过一列的宽度，显然，这个空span灰跑到第一行去，一样是发生较大的水平位移，所以，又能够通知脚本刷新瀑布流布局了。

这个方法的好处是几乎没有计算就能够一点不差地知道什么时候瀑布流布局须要刷新。这显然要比设置resize定时器+位置尺寸计算要简单高性能地多。

滚动时的页面刷新是基于HTML字符串的处理，而不是更改每一个DOM元素的位置（这是绝对定位实现的处理），所以，这里的效率显然更高。

5、总结：基于多栏列表流体布局瀑布流效果优势

1. 简单：最大限度利用了浏览器的流体特性进行布局，省去了不少计算的麻烦；新人更易懂和上手
2. 更好的性能：这个体如今多处，如浏览器宽度改变，瀑布流刷新时候的效率等
3. 无需知晓尺寸：若是是要绝对定位实现瀑布流，必须知道每一个小模块的高度以及宽度（不然没法定位），而基于列表的布局则无需知道高宽

无聊时候的折腾，有不足与不许确之处欢迎指正。一些实现的具体细节等也是很是欢迎提问交流的。

原创文章，转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]