js实现瀑布流布局

之所以采用js实现而不是css，是因为我的页面的动态加载，然后需要根据窗口大小变动实现不同列数的瀑布流，所以采用js写法

**dom结构**

	
1
	
2
	
3
	
4


**css**

.contentList {
  position: relative;
   height: 500px; // 必须有固定高度，如有必要可以采用下面的动态计算赋值
   // height: v-bind('maxHeight'); 
 }
 .cont-item {
   width: 314px; // 宽度可以使百分比
   height: auto;
   position: absolute;
 }

**因为vue项目 所有定义了一个flowComputed方法，方法里是纯js写法**

mounted() {
 this.flowComputed()
  window.onresize = _.debounce(this.flowComputed, 300) // 这里使用了lodash的debounce来实现防抖
},

methods: {
	flowComputed() {
      // 获取页面宽度
      let contentDom = this.$refs.flowLayout
      if (!contentDom) return
      let pageWidth = contentDom.clientWidth;
      let likeArray = document.getElementsByClassName("flow-item");
      let itemArr = Array.from(likeArray)
      // 获取图片固定的宽度
      let itemWidth = itemArr[0].offsetWidth;
      // 设置图片之间间距
      let gap = 10;
      // 获取一行最多可以展示几张图片
      let nums = Math.floor(pageWidth / (itemWidth + gap));
      // 瀑布流实现原则：
      // 所有图片元素绝对定位，从第二行开始，依次从第一行图片元素高度最小的下方填充，这里注意，不是从左至右填充，即优先填补空位，填补一个后，再填补下一个较大的空位
      // 定义第一行图片的所有高度的数组，之后每张图片下方填充图片后，会更新数组对应位置下的最小高度
      let heightList = [];
      let imgLen = itemArr.length;
      for (let i = 0; i < imgLen; i++) {
        // 如果 当前图片元素索引小于一行最多可以展示的图片个数，说明是第一行，top 已在css中默认设置为0，需要统一设置 left 值,top值如果加gap，则还需设置gap值
        if (i < nums) {
          // 将第一行的图片元素的高度放入 heightList 数组
          heightList.push(itemArr[i].offsetHeight + gap);
          itemArr[i].style.top = gap + "px";
          itemArr[i].style.left = (itemWidth + gap) * i + "px";
        } else {
          // 否则从第二行开始，要根据第一行图片元素的高度，设置top和left
          // 先假设 heightList[0] 为最小高度
          let minItem = {
            minHeight: heightList[0],
            minIndex: 0,
          };
          for (let j = 0; j < heightList.length; j++) {
            if (heightList[j] < minItem["minHeight"]) {
              minItem["minHeight"] = heightList[j];
              minItem["minIndex"] = j;
            }
          }
          itemArr[i].style.top = minItem["minHeight"] + gap + "px";
          itemArr[i].style.left = (itemWidth + gap) * minItem["minIndex"] + "px";
          // 关键步骤，更新 heightList 中对应位置下整列图片的高度，以便在下次循环时根据heightList 重新寻找最小高度
          heightList[minItem["minIndex"]] = parseFloat(itemArr[i].style.top) + parseFloat(itemArr[i].offsetHeight);
        }
      }
      this.maxHeight = Math.max(...heightList) + 'px'  // 计算出做大高度
    },
 }