瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种：等高等宽、等宽不等高、等高不等宽，接下来我们就最为普遍的等宽不等高形式来作为示例。
我们用百度图片作为范例：
这就是PC端比较常见的瀑布流布局方式，接下来我们审查下元素看看百度图片里面是如何布局：
可以看到，它里面实际是若干个等宽的列容器，通过计算将图片push到不同的容器里。而本文介绍的展示方法是通过定位的方式，虽然最后布局展示的方式不同，但之前的算法都比较类似。
动手
首先我们将如下样式的若干个单元写进body中，并将“box”向左浮动：
<div> <img src="https://www.jb51.net/article/resource/images/1.jpg" /> <div>Description</div> </div> <div> <img src="https://www.jb51.net/article/resource/images/2.jpg" /> <div>Description</div> </div> <div> <img src="https://www.jb51.net/article/resource/images/3.jpg" /> <div>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)。之后将第二行开始的图片定位在高度最小列的下面，效果如下：
可以看到虽然摆对了地方但是所有的图片都放在同一个地方了，这是因为我们需要在摆放一张图片后就要增加该列的高度：
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 }); columnHeightArr[minHeightIndex] += $(item).outerHeight(true); } });
结果正确：
注意：上面的代码需要运行于window.onload方法里，因为只有当页面中的图片资源全部加载完毕后，其每张图片的高度才会有效。
因此会有一些很严重的问题，当网络不好的时候图片没有完全加载完成就会出现图片展示不全高度缺失的情况，这点在移动端很明显。而且当我们加载更多时，更难判断新追加的图片是否加载完成。
在实际生产中更不会有一开始就将图片写死在HTML中的情况，所以我们通常用以下的方式来做：
首先我们在获得图片地址时同时也需要获取图片的宽和高 ，这点对服务端后台来说并不是什么难事，可以拜托后台兄弟将图片的宽高数据拼进JSON，传递给你；
*接下来介绍小技巧，非常实用，它能保证一个元素无论大小如何变化，比例始终保持一致。这个技巧尤其适用于移动端，因为元素为了响应式通常使用百分比的形式。
假如手机页面中有一张图片，其宽度要为屏幕的一半，高宽比为2:1，需要在任何分辨的手机上保持比例不变。如何做？给元素设置如下属性：
.box { width: 50%; height: 0; padding-bottom: 100%; }