瀑布流js

	getWaterfall() {
      let columns = 2; //定义布局的列数为2
      let item = this.$refs.waterfallItem; //获取每个子元素的DOM
      console.log("item",item)
      for (let i = 0; i < item.length; i++) {
        //遍历整个子元素的DOM集合
        if (i < columns) {
          //小于columns的子元素作为第一行
          item[i].style.top = 20 + 'px';
          item[i].style.left = item[0].clientWidth * i + "px";
          console.log("offsetWidth", item[0].clientHeight)
          this.array.push(item[i].clientHeight); //遍历结束时，数组this.array保存的是第一行子元素的元素高度
          console.log("this.array",this.array)
        } else {
          //大于等于columns的子元素将作其他行
          let minHeight = Math.min(...this.array); //  找到第一列的最小高度
          let index = this.array.findIndex(item => item === minHeight) // 找到最小高度的索引
          //设置当前子元素项的位置
          item[i].style.top = this.array[index] +25+ "px"; 
          item[i].style.left = item[index].offsetLeft + "px";
          //重新定义数组最小项的高度 进行累加
          this.array[index]+= item[i].clientHeight
          console.log("this.array[index]",this.array[index])
        }
      }
    },`