接收两个dom节点参数 container:容器 element:插入内容

    /* *
    * 瀑布流
    * @param container:要插入的容器节点
    * @param element:插入的元素节点
    * */
    function waterLayout(container, element) {
      /* *
      * 是否进行初始化
      * */
      if (!container.getAttribute("harr")) {
        // 获取列数
        var cols = parseInt(container.offsetWidth / (element.offsetWidth - 1));
        // 节点标注高度数组
        container.setAttribute("harr", JSON.stringify(new Array(cols).fill(0)));
      }

      // 获取高度数组
      var hArr = JSON.parse(container.getAttribute("harr"));
      // 获取最小高度
      var hMin = Math.min.apply(null, hArr);
      // 获取最小高度在高度数组中的索引号
      var index = null;
      for (var i = -1; hArr[++i] !== undefined;) {
        if (hMin === hArr[i]) {
          index = i;
          break;
        }
      }
      // 设置元素样式
      element.style.position = "absolute";
      element.style.top = hMin + "px";
      element.style.left = index * (element.offsetWidth - 1) + "px";
      // 刷新数组
      hArr[index] = hArr[index] + element.offsetHeight - 1;
      container.setAttribute("harr", JSON.stringify(hArr));
      // 设置容器高度
      var hMax = Math.max.apply(null, hArr);
      container.style.height = hMax + "px";
    }

注意事项:

1.插入元素的宽度必须相同;

2.container的容器宽度保持不变(container或container的父元素的滚动条的隐藏和显示会影响宽度,最好给滚动条元素设置overflow-y:scroll);

3.内容中包含图片时需要预先加载图片再执行插入操作,可如下操作;

var container = container; //容器节点
var element = element; //内容节点

var img = new Image;
img.src = *.jpg //需要预先加载图片的地址;
img.onload = function(){
  //瀑布流插入操作
  waterLayout(container, element);
}