前端之瀑布流布局（多种实现方案）

瀑布流布局，一般指根据内容高度自适应填充到某一列以使整体页面和谐，常见的有图片网站，比如每一行每一列的内容是错开的。

瀑布流布局一般是下面这个样子

css中有这么两个属性:

注意

这也是我推荐大家用第一种方法的最主要原因。

这种方案做出来的效果有点奇葩，特殊的应用场景可能会用到，最终效果是横向瀑布流

flex布局中有一个属性 flex-flow ,指明在哪个方向上在长度不够的情况想拆行，详情大家自己查阅

第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如（1）图片预加载，（2）querySelector取元素居然获取不到，（3）使用box-sizing简化计算过程降低复杂性，等等。 box-sizing 属性用好了非常高效，推荐大家去仔细看看

第二种方法其实也可行，但是不推荐

第三种方法就有点扯了，估计不常用到，大家看看就行

主要思路如下

1.计算页面的宽度，计算出页面可放数据块的列数。

2.将各个数据块的高度尺寸记入数组中

3.用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。

4.继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

5.当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。

6.滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

预览：

https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu30.html

源码：

一种方法是使用Wordpress插件，这个插件自带瀑布流效果；

另一种方法是使用插件，但是插件归根阶地还是需要模板支持的。

说道独立制作的话，就比较麻烦了，而且模板一旦更新就需要从新更新代码，实在是麻烦。

选择一个比较牛的主题其实很关键。

---