竖向瀑布流布局解析！

瀑布流是各种壁纸社区喜欢用的布局效果，精品的图片随着滚动条的下拉一张张从渲染出来，非常的好看。

作为一名前端工程师，我们工作中可能会遇到类似的这种需求，今天我就给大家剖析下瀑布流的整体思路。

因为这种效果可能牵扯到具体的公司需求，容器大约多少列、这种都不能统一，所以今天给大家分享下4列的设计原理，大家可以将这种编程的思路灵活的运用到自己的实际工作中。

当我们从后端发送ajax请求的时候，拼接完html结构(如果有同学喜欢原生的话，建议使用创建dom元素的方式，下面到时会解释!)，我们渲染所有结构，图片的高度肯定时错来，这个时候我们需要定时一个方法重新排列图片的位置。

这个方法我们首先需要先将第一行四个容器渲染出来。

下面是第一行渲染的效果。

我们有了这四个固定位置的图片那就好办了，我们创建一个数组，将第一行的高度存起来（这里需要注意，图片是通过后端请求过来的数据，是需要时间来加载的，哪怕是在成功请求之后，依然是无法获取高度的，我们可以通过给标签设置自定义属性来记录后端存储的图片高度）。

数组格式[ img1.height, img2.height, img3.height, img4.height ]

下来我们开始处理后面的数据，这里需要注意了，我先贴图片，以便于大家理解。

理想情况下是，除过前4张的图片，后面的图片一次寻找最短的高度，插入到空位中，这里起始也就是瀑布流布局的核心了，大家注意，看到问题首相要学会联想和发散思维，如何“寻找最短的高度”？

高度和什么有关系？图片的高度？能想到这里的，大家都很不错。

这时候我们回想下，我们在处理第一行的时候说了，第一行的图片由于是固定，所以我们可以在他的身上做手脚。

这个时候我们找到刚才的第一行的高度数组 [ img1.height, img2.height, img3.height, img4.height ]  找出最下的那个数字，这样我们不就解决了“如何寻找最短的高度”的问题。

这里给大家介绍了野路子查找数据的最小值Math.min.apply(false,高度数组);如果大家不能理解可以使用 Math.min.apply(…高度数组)  三个点位展开运算符是ES6语法。

既然我们能拿到正确的高度，那我们就可以处理后面图片的布局了，我们给后面的图片加上绝对定位，设置top为最短高度。

图片全叠到一起了，因为现在只是初步解决了top的高度问题，还有left的问题没有解决，相信大家也都能理解，第一行4列，以后没行也都是4列，并且通过上面的高度数组，我们可以正确的查找到最短的高度在那一列（第三列，对应的索引为2），我们用索引*单个容器加间隔，就可以正确的得到最短高度，最短高度所在列。

哎，不是正确了吗？怎么还堆到一起了？

大家像一个问题，虽然说，我们每次都是操作的数组的最小的高度，但是没有记录下来这值的改变，图片又如何能正确排列呢，所以每次我们都要记录最短高度的改变，所以通过数组最小下标的索引，将最小高度赋值为最小高度+本次填充的图片的高度，这样不断的循环，就能得到正常的瀑布流布局效果。

这是正常效果的情况，下面我用图片来分解一下程序的执行：

我先假设一下，直观的数字可能大家更好的理解：

图片高度数组:[200,400,100,150]、第二行图片高度为100,200,300,400、图片宽度都为100，间隔为10

第5次循环：

 

第6次循环：

 

第7次循环：

上面提到了为什么使用dom造作是因为:如果使用了字符串拼接的话，从后端请求的数据会覆盖原理的html结构，不会忘容器的后面追加。

 

相信大家看到这里基本上都明白了，原理了，当然这只是完成了一部分，还有一个核心就是，在滚动到底的时候，如何控制调用次数，这里给大家一个大方向的思路，函数的节流与去抖，以及使用状态变量，下次有机会了，再给大家分享我的思路！

给大家推荐一个高效的前端交流社区：