在慕课网上，又get到一个新的知识点，即实现网站中不同高度的块级元素在父元素下自适应排列，以达到统一的网页视觉效果的一种WEB技术。

实现的原理：

1.通过计算（页面宽度/单个图片div宽度=列数）得到显示的列数

2.定义一个数组arr，数组的长度即列数，用来保存列高度，初始值都为0

3.查找数组最小值索引赋给minIndex

4.图片盒子.left=minIndex*单个元素宽度

5.图片盒子.top=arr[minIndex]

6.更新 arr[minIndex]+=图片盒子.offsetHeight，判断是不是最后一个图片盒子，如果不是，跳到3。如果是则结束。

 

需要重点理解的是关于minIndex的使用，即minIndex的查找、使用、更新

查找：查找哪一列的高度最低，用来放置新的图片盒子

使用：设置新的图片盒子的绝对定位

更新：更新列的高度

Demo：http://htmlpreview.github.io/?https://github.com/Tanlifan/Study-and-Demo/blob/master/Waterfall/index.html

代码地址：https://github.com/Tanlifan/Study-and-Demo/tree/master/Waterfall

效果图：

可以通过window.onresize来监听窗口事件，用来更新列数，即列的数量随着窗口宽度大小变化

通过window.onscroll来监听滚动条时间，用来添加更多节点到DOM中来实现加载新的图片盒子

具体请看代码