不设置高度，而是用padding“挤”出元素高度，而padding的百分比值都是基于父级容器的宽度。padding需要挤多少呢？就是宽度乘以高宽比（width和padding值均为百分比值），这就是我们为什么需要获得图片尺寸的原因。
效果：
可以看到在chrome手机模拟器中ipone4和肾6Plus的显示效果是完全一样的。在手机页面中宽是固定的，而高会随着页面内容的多少而变化，这个技巧利用元素padding百分比的值其实是基于其父级容器的宽，将高的值巧妙的转化成与宽相关。
说到现在可能有人终于忍不住要问了，讲了这么多和瀑布流有什么关系！简单就是一句话，我们要抛弃 img 标签，而采用背景图的方式。为了使用背景图，就得保持元素的比例永远与图片保持一致。
通过这种方式，可以不用判断图片都加载完毕，直接产生一些与图片同比例的div，再为其设置背景图，如下：
这里比如最外层的box宽度为220px，里面的img元素宽度就可以为100%，高度就可以通过padding挤出了。
懒加载
使用背景图的方式还有好处那就是可以比较方便的实现懒加载。那什么是懒加载呢？就是当元素在我们的视野中时才展示图片，滚动时屏幕下方的图片并不展示，这可以很好的增加加载速度提升体验。
首先我们给最外层的box增加一个box-item类名（之后有用），将图片url并不设置给backgroundImage属性，而是赋给一个自定义属性：data-src。
<div> <div data-src="https://www.jb51.net/article/resource/images/1.jpg"></div> <div>Description</div> </div>
接下来我们编写懒加载函数：
function lazyLoad() { var boxArr = $('.box-item'); boxArr.each(function(index, item) { var viewTop = $(item).offset().top - $(window).scrollTop(), imgObj = $(item).find('.img'); if ((viewTop < $(window).height()) && (($(item).offset().top + $(item).outerHeight(true)) > $(window).scrollTop())) { imgObj.css('backgroundImage','url('+imgObj.attr("data-src")+')').removeClass('data-src'); $(item).removeClass('box-item'); } }) }
首先我们获取所有拥有 .box-item 类名的元素，遍历。viewTop 为图片相对于浏览器窗口的相对高度，类似于position:fixed感觉。
通过条件进行判断，只有当该图片在浏览器窗口内（之上或之下都不行）时，将需要设置背景图元素的 data-src 值展示出来，并删除该属性。
之后将最外层元素的 box-item 删除，因为已经展示出来的图片不需要再进行这些判断，删除了该类名下一次滚动时就不会获取到已经展示过的元素，需要遍历的次数就会越来越少，这样能起到一个优化的作用。
该函数需要在你的元素已经append进页面时调用，以及在滚动时调用：
lazyLoad();
$(window).scroll(lazyLoad);
滚动加载
说完了懒加载，再说说滚动加载。所谓滚动加载就是当页面滚动到底部附近时加载新的图片。我这里选择的是滚动到高度最小的列底部时加载新的数据，你也可以根据自己的喜好来做判断。
function scrollLoad() { var viewHeight = $(window).scrollTop() + $(window).height(), minHeight = Math.min.apply(null, columnHeightArr); if (viewHeight >= minHeight) { //loadMore... } }
滚动加载也是在window的滚动事件中进行监听，可以与懒加载一起进行：
$(window).scroll(function() { scrollLoad(); lazyLoad(); });
说完了PC端，我们来说下手机端。其实原理是一样的，只是从多列变成固定的两列了。
var boxArr = $('.box'), columnHeightArr = []; columnHeightArr.length = 2; boxArr.each(function(index, item) { if (index < 2) { 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); } });
不同的是为了适应不同屏幕的手机，最外层的box容器宽度和边距要设置成百分比的形式。
