动态加载图片，实现瀑布流效果

瀑布流

1.瀑布流

瀑布流,可以有多列,每一列的高度可以不相同,但是宽度必须一样；

排列的方式是,从左往右排列,哪一列总高度最小,就优先排序，把图片放在这一列.

这样排完所有的图片后,可以保证每一列的总高度都相差不大。

2.实现思路

a.先加载所有图片，然后定位（position: absolute;）在第一张那里，重叠在一起；

b.获取每张图片的高度，计算每列图片盒子（li）的总高度，一张一张定位排列位置，优先定位排列在高度最小的一列；

c.图片间距的调整

3.遭遇难题

a。我们在动态加载图片后，获取图片盒子的高度只有初始盒子占位的高度，并不是图片盒子的总高度

因为我们获取高度的时候，图片还没加载出来

这时，就需要我们使用图片预加载，先把图片加载出来，再去获取图片盒子总高度

4.激动人心的代码干货（给哥一个赞啊）

5.使用方式

复制以上代码，替换 jq ，图片路径，自己调试去

6.感谢！

分享一个本人写文章的站址

http://tn.51cto.com/article/321