瀑布流布局

方案一，使用 css

.wrapper {
  position: relative;
  width: 1200px;
  margin: 100px auto;
  border: 1px solid #000;
  // 主要依靠这两个属性 是css3新增的  但是存在兼容性问题
  columns: 5;
  column-gap: 10px;
}
.wf-item .wf-img {
  width: 100%;
  height: 100%;
}

方案二：使用 js

;(function () {
    var Waterfall = function(options) {
      this.el = document.getElementsByClassName(options.el); // 获取到外围容器
    this.column = options.column || 5; // 多少列
    this.gap = options.gap || 10; // 缝隙是多大
    this.oItems = document.getElementsByClassName('wf-item'); // 拿到所有的瀑布流img盒子
    // 计算每一项的宽度
    this.itemWidth = (this.el.offsetWidth - (this.column - 1) * this.gap) / this.column;
    this.heightArr = [];
    this.init();
  }

  Waterfall.prototype.init = function() {
      this.render();
  }

  Waterfall.prototype.render = function() {
    var item = null;
      for (var i = 0; i < this.oItems.length; i++) {
      item = this.oItems[i];
        if (i < this.column) { // 处理第一行
          // top 设置为 0
        item.style.top = '0px';
        // left 设置为 i * (每一项的宽度 + gap)
        item.style.left = (this.itemWidth + this.gap) * i + 'px';
        // 把每一项的盒子高度存在 heightArr 中，为不是第一行的盒子显示提供参照
        this.heightArr.push(item.offsetHeight);
      } else { // 处理非第一行
          // 找出高度数组 heightArr 中值最小的一个，排在它的下面
        var minIndex = getMinIndex(this.heightArr);
        item.style.top = this.heightArr[minIndex] + this.gap + 'px';
        item.style.left = this.oItems[minIndex].offsetLeft + 'px';
        this.heightArr[minIndex] += item.offsetHeight + this.gap;
      }
    }
  }

  function getMinIndex(arr = []) {
      return arr.indexOf(Math.min.apply(null, arr));
  }

  window.Waterfall = Waterfall;
})();

// 使用
window.onload = function () {
  new Waterfall({
    el: 'J_waterfall',
    column: 8,
    gap: 10
  })
}