js瀑布流

瀑布流布局思路：

1、css样式，图片的父级div样式设置为定位或者浮动。

2、找出图片父级元素（box）和最外元素（main）；获取box的宽度和main的宽，然后计算main容器一行能容纳多少个box（即有多少列）。

3、声明一个空数组（用于放置每列的高度）。

4、for(var i=0;i<box.length;i++)循环遍历所有的box元素，if 判断i是否小于上面求得的列数，设置box元素top、left和把box元素的高度添加进空数组；如果i值大于列数就是第二行其余的box元素，查找出数组中的最小值和最小值的索引，设置box的top为这个值，left值为box[index].offsetLeft，更新所查找到的数组元素的值（原数组值+当前box的高度）。

5、定位和浮动脱离了文档流，最高给main设置高度为数组的最大值。

瀑布流感悟

1、先要计算出当前可视页面的宽度（当对页面进行ctrl缩放时 再点击刷新 图片的列数会改变）。
2、通过设置的图片的固定宽度 （这里只设置图片的宽度 不对图片的长度进行设置）.pic img{ width: 200px;height: auto;height设置成auto自适应；这样就可以有不同的高度。
进行计算取整 得到当前可视页面能放多少个图片。
3、设置一个空数组 用来放置每一列的高度。
4、首先第一行是从第一个开始挨个放 第一行放好后 放置第二行时 通过第一行在空数组存下的数值 遍历找出来最小的一列 将下一张图片放在这一列 同时放置的时候不要忘了进行数组的更新 将数组的数值改成最新的列的高度。

image.png