场景
在好多H5页面，APP或者PC端的首页，展示列表的形式都是瀑布流小程序也是如此
样式
image.png
如上：类似于以上的这种展示方式就是瀑布流
实现原理
有几列就创建一个有几项的高度空数组，例如上图是两列，那么创建一个[0,0]的高度空数组，我们在请求完一组数据后，遍历这组数据的数组，然后拿个每个数组的盒子的高度，将每个盒子的高度叠加到高度数组中项数低的那一项，比如第一个盒子高度300px，那么最新的高度数组就是[300,0]，那么就给这个盒子一个定位的属性，top：0，left：0，第二个的定位属性就是top：0，left：400，这个400是右边列盒子距离左右的距离，一般情况下是固定的，所以当着是个数据遍历完以后，我们就可以按照想要的样式排列所有的数据了
直接上代码
image.png
图中的代码是再请求完第一组数据的回调里进行的，其中offset的初始数据是0，意思是开始遍历的下标，我们先初始化一个高度数组，也就是waterFullInit（）函数，然后在进行sort（）函数进行排序
image.png
sort（）函数就是处理瀑布流的项数的高度，并且赋予样式的函数
image.png
给对应的盒子加上样式后，我们在看一下
html
image.png
那么对应的样式为
image.png
总结：
其实瀑布流的实现原理大概就是这样，我们当然可以对其进行各种封装和改进，以上是固定列数和每一项宽度的实现，我们完全可以通过变量去控制列数和宽度的自适应，具体实现思路就是以上了
