瀑布流布局

定义

---

一堆 等宽 不等高 的数据块组成的页面。

排列规则

---

• 根据图片的宽度和页面的宽度算比例算出列数。
• 第一行就是按顺序排列。
• 其他数据块挑选出最低的一列依次排进去。
  
  

仿站-花瓣网

---

布局：瀑布流

花瓣网网页截图

其它特点：鼠标事件

鼠标事件

仿制结果

瀑布流

思路

---

代码一开始，先应该设定当页面加载完再开始执行js代码。
然后，进入我们定义的瀑布流函数。先要使函数能够获取图片的宽高信息、图片数量，从而计算列数，再得到外层盒子宽度并使之居中。
到此计算告一段落。
定义一个数组读取并存放第一行图片的高度，并用Math.min()方法得到第一行中高度最小值，把第二行第一个图片放在高度最小的一列下面，并修改该列的高度，利用循环，总是把新加入的图片放入高度最小的一列，再利用图片数量信息控制退出循环结束函数。

在上述仿站中，由于准备的图片本来就等宽不等高，所以不需要给图片素材设置等宽。又由于已知列数为4，所以也不需要计算列数，只需要通过列数来直接计算最外层盒子的宽度。

而对于鼠标移动到图片上产生的事件，则属于不见动画的一种，要结合DOM和CSS3两方面来完成。首先红色遮盖具有一定透明度，当鼠标到达图片上市它以一定速度曲线从下至上逐渐遮盖屏幕的，鼠标离开时红色遮盖又沿相同路径返回隐藏。

然后就是。。我又挖了个坑没填，没有做鼠标滑动事件。

遇见的问题：设置了mian盒子的边框但是只显示顶部边框
解决：盒子的高度没有固定，所以只显示了顶部边框

参考资料

---

JavaScript瀑布流布局