jQuery制作瀑布流

jQuery制作瀑布流

1. 瀑布流的图片包含在container的盒子，每张图片配文字说明放在box盒子中

2. 将页面布局之后，主要解析js部分代码

3. 页面加载完毕之后，执行js代码，绑定load事件，load事件执行imgLocation函数

4. 首先获取每张图片的宽度（此处设定每张图片的宽度一样），获取每排摆放图片的张数。

$(window).width()获取浏览器窗口的宽度.

除以每张图片的宽度，得到浏览器每排摆放的图片数目。

5. 瀑布流的处理主要放在第一排的图片上面。

之后的图片以图片高度累加计算，得到第一排最小高度的图片位置，此时创建的数组就是为了存放第一排每张图片的高度。

6. 对每张图片进行遍历，box.each()实现。

参数index表示当前遍历的box的下标，value表示当前遍历的box盒子

var boxHeight = box.eq(index).height()

获取的是遍历的每张图片的高度，所以变量boxHeight为存放每张图片高度的数组。

7.  将第一排的图片高度存放在数组 boxArr 中。

同时得到第一排图片中高度最小的图片高度

Math.min.apply(null,boxArr)处理的就是boxArr中最小的值

8. 得到第一排图片的最小高度之后，计算出该图片的角标，即图片的位置（第几张图片高度最小）。

由$.inArray(minboxHeight,boxArr)函数处理（注意）

9. 将第二排的第一张图片放在第一排最小高度图片之下。

box.eq(minboxIndex).position().left

得到第一排最小高度图片距离浏览器左边的距离。

10. 这样处理的结果是：将第二排的第一张图片的高度放在第一排高度数组中。

将第一排最小高度图片的高度加上插入进来图片的高度，重新计算第一排图片高度的最小值，依次类推。

效果图：