深度介绍瀑布流布局

瀑布流布局

瀑布流又称瀑布流式布局，是比较流行的一种网站页面 布局方式。多行等宽元素排列，后面的元素依次添加到后面，接下来，要开始介绍这种布局如何实现
Html代码以及效果展示：

代码：

先使用一个container容器作为父容器，里面分别装了十个子容器box，这十个子容器下面分别装载了各自的样品图片。

效果展示：

Div是块级元素，所以每一张图片分别占据了一行。

接下来介绍瀑布流css的代码以及效果实现

Css的代码展示如下图：

在对整个页面自带的边框进行清除之后，对父容器container使用了相对定位，让其不需要脱离文档流，给子容器加上该有的样式后将其下面装载的图片进行父容器宽的100%继承，一般在这里设置只需要考虑宽或者高的一种继承设置即可。

效果展示：

因为每一张图片的高度不一致，所以图片排列并没有按照顺序排列。

JS部分的代码以及效果展示：

总体思路：

首先我们要获取所有我们要摆放的照片，根据用户视窗的宽度以及每一张图片的宽度计算出每一行会占据多少张图片，再计算第一列图片的高度，将下一列的图片分别对应最低高度的图片在其后面进行存放布局展示，然后更新新的高度，重复上述的操作。

首先，我们要调用imgLocation函数，将父容器和子容器放进这个函数进行调用。

Winodw.onload()函数的意思是必须等待网页全部加载完毕，包括在内的图片，然后再执行包裹代码。

接下来详细介绍imgLocation函数内容

在imgLocation函数里面设置parent和content两个形参，这两个形参将会对应调用函数的时候传递过来的两个实参，用cparent变量和ccontent变量分别对应parent（就是父容器container）以及content（就是父容器下对应的第一层子容器box）

getChildElement()函数是自己写的，再来介绍一下这个函数的内容：这个函数的作用就是取得父容器中的某一层子容器

代码展示：

说明：

首先我们设置一个变量数组contentArr存放最终取到的所有子容器，再设置一个变量存放所取得整个父容器的标签，直接通过标签来取得，显示就是直接用的是数组的形式。然后写一个for循环函数，在所有的标签下寻找对应的类名，便将其存放在contentArr数组中，最后返回一个数组形式，因此ccontent是一个数组形式。

接下来再回到imgLocation函数中，在获取所有要摆放的图片之后，我们要进行计算从哪一张图片是需要被操作，被摆放位置，计算第一行能存放多少图片。

代码展示：

说明：
winWidth装载的是用户的视窗宽度，imgWidth装载的是一张图片的宽度，因为每一张图片的宽度都是一致的，因此可以直接固定随意写一张图片的宽度，num存放的就是第一行能存放多少图片的张数。

接下来要开始操作第num+1章图片，先拿到第一列所有的图片的高度，我们使用一个数组进行高度的存放。

代码展示：

说明：

循环遍历取得的每一个子容器，前num个子容器只需要取得他们的高度即可，就是第一行的图片的高度。接下来这部分是我们要进行操作的box，math.min（）这个里面装的是数字不是数组，调用apply将这个找最小值的方法借给数组用取得最小高度，然后minIndex拿到最低高度的图片所在的位置，就是下标。将需要操作的子容器图片的样式变成绝对定位，距离顶部的距离就是最低图片的高度，距离左边就是图片的小标乘以图片的宽度，因为每张图片的宽度都是一致的。最后再更新最矮的那一列高度，重复循环再找到新的最矮的高度进行排列。

所有代码展示：

效果展示：