瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种：等高等宽、等宽不等高、等高不等宽，接下来我们就最为普遍的等宽不等高形式来作为示例。
我们用百度图片作为范例：
这就是PC端比较常见的瀑布流布局方式，接下来我们审查下元素看看百度图片里面是如何布局：
可以看到，它里面实际是若干个等宽的列容器，通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式，虽然最后布局展示的方式不同，但之前的算法都比较类似。
动手
首先我们将如下样式的若干个单元写进body中，并将“box”向左浮动：
<div class="box">
<img class="img" src="./resource/images/1.jpg" />
<div class="desc">Description</div>
</div>
<div class="box">
<img class="img" src="./resource/images/2.jpg" />
<div class="desc">Description</div>
</div>
<div class="box">
<img class="img" src="./resource/images/3.jpg" />
<div class="desc">Description</div>
</div>得到如下效果：
接下来：
var boxArr = $('.box'),
num = Math.floor(document.body.clientWidth / boxArr.eq(0).outerWidth(true)),
columnHeightArr = [];
columnHeightArr.length = num;
boxArr.each(function(index, item) {
if (index < num) {
columnHeightArr[index] = $(item).outerHeight(true);
} else {
var minHeight = Math.min.apply(null, columnHeightArr),
minHeightIndex = $.inArray(minHeight,columnHeightArr); $(item).css({
position: 'absolute',
top: minHeight,
left: boxArr.eq(minHeightIndex).position().left
});
}
});
以上代码大意为：
1. 首先计算出在浏览器中一行能容纳多少图片 (num) ，注意这里用了outerWidth，当传入true时会返回元素包括margin、padding、border全部盒模型属性的尺寸；
2. 创建一个存储每一列高度的数组 (columnHeightArr) ，该数组的长度即为num值；
3. 遍历所有图片，将第一行的图片高度分别存入列高数组中 (columnHeightArr) ，从第二行开始，首先计算出所有列中最小的高度 (minHeight) 以及最小高度所在的列 (minHeightIndex)。之后将第二行开始的图片定位在高度最小列的下面，效果如下：
