jQuery实现瀑布流布局详解（PC和移动端）

可以看到虽然摆对了地方但是所有的图片都放在同一个地方了，这是因为我们需要在摆放一张图片后就要增加该列的高度：

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%;
}

不设置高度，而是用padding“挤”出元素高度，而padding的百分比值都是基于父级容器的宽度。padding需要挤多少呢？就是宽度乘以高宽比（width和padding值均为百分比值），这就是我们为什么需要获得图片尺寸的原因。

效果：

可以看到在chrome手机模拟器中ipone4和肾6Plus的显示效果是完全一样的。在手机页面中宽是固定的，而高会随着页面内容的多少而变化，这个技巧利用元素padding百分比的值其实是基于其父级容器的宽，将高的值巧妙的转化成与宽相关。