瀑布流布局

封装方法

 waterFull(items){//瀑布流  items为传入的dom
   
    let columns = 2; // 1- 确定列数
    let itemWidth= (this.sizeWidth().width - this.gap) /2; //2列每列的宽度 this.gap为间距我定义的10 this.sizeWidth()为获取宽度高度
    var arr = []; //数据
    for(var i= 0 ;i<items.length;i++){

      if(i<columns){
        // 2- 确定第一行
        items[i].style.top = 0;
        items[i].style.left = (itemWidth + this.gap) * i + 'px';
        arr.push(items[i].offsetHeight);
      }else{// 其他行
        // 3- 找到数组中最小高度  和 它的索引
        var minHeight = arr[0];
        var index = 0;
        for (var j = 0; j < arr.length; j++) {
          if (minHeight > arr[j]) {
            minHeight = arr[j];
            index = j;
          }
        }
        // 4- 设置下一行的第一个盒子位置
        // top值就是最小列的高度 + gap
        items[i].style.top = arr[index] + this.gap + 'px';
        // left值就是最小列距离左边的距离
        items[i].style.left = items[index].offsetLeft + 'px';

        // 5- 修改最小列的高度
        // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
        arr[index] = arr[index] + items[i].offsetHeight + this.gap;
      }
    }
  },
  
    sizeWidth() {//宽，高
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
  },

初始化调用

   this.$nextTick(function(){
          let  box = document.getElementById('box');
              let items = box?box.children:[];
              that.waterFull(items);
              
 })

css一定要把item设置为position: absolute;到此大功告成！

效果