「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

前言：在移动端两栏的瀑布流交互方式还是很常见的，大多用在图文的展示上，在这里记录下自己的实现方式，供有需要的人参数

视觉表现就是一种参差不齐的多栏布局，随着页面的滚动，随之加载数据。其实本质就是容器内有多个高度不一致的元素展示，既多行等宽元素的一种顺序排列。

本片文章只实现移动端比较常见的两栏瀑布流，并且是小程序生产环境可用的，所以就不再赘述一些其他方式的实现。

新建waterfall自定义组件

使用小程序提供的boundingClientRect获取布局节点的位置信息，这样就可以获取到容器的高度，来做插入判断。 具体实现，看代码：

由于小程序的双线程架构，频繁的setData会对性能有较大的损害，因此我们要尽可能的减少setData，因此对于一个瀑布流来说，我们正常滚动过程中，对一次加载的数据，先判断当前左右容器的高度，然后将数据遍历，分成2份，最后直接一次setData。 只有当是最后一页数据时，保证我们瀑布流不会出现一边很高，一边很低。这个时候我们做到每插入一个元素都去计算左右容器的高度，保证正确的插入顺序，样式上做到符合预期。 代码已在上面体现。

调用这里，我们不使用数据传递，而是直接调用自定义组件内的方法，在使用的页面内：

这里是使用页面的滚动到底部的钩子函数，同理也可以使用在scroll-view组件内。

本文的重点其实性能优化这点，由于小程序双线程的架构，因此数据-》渲染这块，整体效率较低。为了交互更友好，体验更好。因此我这里想的是，正常的加载过程中，只判断当前容器的高度，然后直接将数据分为两份，然后对应加载。只有当是最后一页时，才没插入一个计算一个，保证最后左右两侧不会出现一边很高，一边很低的现象。