出现的bug:
1、clos=Math.floor($(window).width()/pins.first().outerWidth());
由于前面的CSS样式中将float:left注释掉了，并且最开始没有把初始化位置那一部分代码放到最前面，也就是图片没有用absolute定位。img外面用盒子包围，是块级元素，自动占据一行，与窗口宽度相等，自然会导致下面的cols一直弹出是1，以后遇到这种情况，一定要结合HTML和CSS样式综合考虑！！
2、还是absolute的问题：
waterfall中clos>index的条件下给图片添加样式，没有加上position:absolute 导致图片加载的时候重叠在一起。
第一次调用waterfall之后，后来每次在加载数据之后又都会重新调用waterfall函数，所以必须每次在样式中都加上absolute定位，而不能只指定top和left
最后总结一下瀑布流的思路：
特点：所有图片列等宽
一进来时获取屏幕宽度和图片宽度，相除取整便是列数。获取所有图片盒子，index小于列数的将其排列到最上面一行，有两种情况：一是如果直接排列，由于float:left;的存在，图片会直接排列开，不用设置。如果是具有分散效果的那种，图片一开始时是混在一起放在浏览器中间的，所以设置图片排列时要指定第一列top:0;left等于图片宽度*索引。将第一排的图片高度放在一个数组中，后面索引大于列数的，就把每个图片的高度加在这个数组中最小的那个值上面，图片也加在对应列上面。然后是滚动时检测是否达到加载图片的条件，这里条件定义为：滚上去的高度+浏览器窗口的高度大于从浏览器顶部到最后一张图片的高度+最后一张图片高度的一半时就加载图片。当然，图片加载进去之后要重新对这些图片进行排列
不足之处：每次都重新排列，占用的资源也太大了吧。。。。
简单思路：
1、原先的HTML中的图片长度用一个全局索引保存，dataInt中每次只加载一定数量的图片，再调用waterfall时只对这张新加载的图片重新排列
2、flex布局
先这么多，剩下的过段时间在写吧
原文地址：https://www.cnblogs.com/hhcc1324/p/8124516.html