瀑布流原理
![瀑布流原理](https://i-blog.csdnimg.cn/blog_migrate/58d7aee0966b74bf05ff5cc1a3f3bfb4.png)
步骤:
1、首先确定图片的列数
2、第一行图片默认位置
3、top属性:后续的每一张图片需要放置到高度最小的列数的位置,放到该位置后,对应列的高度增加防止图片的高度
4、left属性:放置列的索引值*图片宽度
5、之后的图片都需要进行3、4步骤的操作。
因此,需要一个数组存储列的当前高度值,每次需要放置一张图片,需要查找数组的最小值(列的最小高度),并且找出最小值对应的索引(列号),至此获取绝对定位的top,left属性值。
初始效果图:
![原始效果图](https://i-blog.csdnimg.cn/blog_migrate/2768104562d8a5653a6fd9336b73e657.png)
函数实现代码
function waterFall(){
var screenWidth =$(window).width(