瀑布流布局

将长短不一的块，进行排序

排序规则：第一排一次排序，后面新增一块 就比较上一排最短的一块填充，填充之后竖排的高度=（之前的高度） + （新增块的高度），然后再按照 这个规则填充剩下的
实现：

分别用数组存储当前每一列的高度之和，数组初始化为0，所以第一列是依次排序，排完之后数组的值分别就是第一排的高度，然后依次往高度最小的地方填充

$.outerWidth(true)包裹这个元素的宽度
$.outerHeight(true)包裹这个元素的高度
代码：
html

<div class="wrap">
  <img src="https://via.placeholder.com/200x150" alt="">
  <img src="https://via.placeholder.com/200x100" alt="">
  <img src="https://via.placeholder.com/200x80" alt="">
  <img src="https://via.placeholder.com/200x200" alt="">
  <img src="https://via.placeholder.com/200x150" alt="">
  <img src="https://via.placeholder.com/200x130" alt="">
  <img src="https://via.placeholder.com/200x110" alt="">
  <img src="https://via.placeholder.com/200x140" alt="">
  <img src="https://via.placeholder.com/200x160" alt="">
  <img src="https://via.placeholder.com/200x50" alt="">
  <img src="https://via.placeholder.com/200x190" alt="">
  <img src="https://via.placeholder.com/200x70" alt="">
</div>
<style>
  .wrap {
    max-width: 900px;
  }
  .wrap img {
    width: 200px;
    position: absolute;
    margin: 5px;
  }
</style>

jq:

//一行几张图
var colCount = Math.floor($('.wrap').width()/$('.wrap img').width())
var colHeightArr = []
//得到一行图片数量设置几个数组
for(var i = 0;i < colCount;i++){
  colHeightArr[i] = 0 //[0,0,0,0]
  }
//当图片加载后计算图片的高度，比较出最小高度的数组
  $('.wrap img').on('load',function(){
    var minHeight  = colHeightArr[0]
    var minIndex = 0
    for(var i=0;i<colCount;i++){
      if(colHeightArr[i] < minHeight){
        minHeight = colHeightArr[i]
        minIndex = i   
    }
  }
//把前这张图片放到数组中高度最小的数组下
$(this).css({
      left: minIndex * $('.wrap img').outerWidth(true),
      top: minHeight
    })
    colHeightArr[minIndex] += $(this).outerHeight(true) //再把当前这个数组加上这张图的高度
  })