写了个简单的vue+原生js瀑布流组件

<template>
  <div class="waterfall" :style="{height: waterfallHeight+'px'}">
    <div class="image" v-for="item in albumList" :key="item.paId">
      <img
        class="img"
        :src="item.paUrl ? 'https://xxx.xxx.xxx' + item.paUrl : ''"
        alt=""
        :style="{ width: oneWidth + 'px' }"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    albumList: {
      type: Array | Object,
      default: () => [],
    },
  },
  data() {
    return {
      oneWidth: 252,//单个图片的宽度，根据实际情况修改
      waterfallHeight:0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.DomLoad();
    });
  },

  methods: {
    DomLoad() {
      const detail_left_width =
        document.querySelector(".detail_left").offsetWidth;
      let rowArr = Array.apply(null, {
        length: Math.floor(detail_left_width / this.oneWidth),
      }).map((item) => (item = 0));
      const imageArr = document.querySelectorAll(".image");
      imageArr.forEach((ele, index) => {
        const minH = Math.min(...rowArr);
          const findindex = rowArr.indexOf(minH);
          ele.style.top = rowArr[findindex] + "px";
          ele.style.left = findindex * this.oneWidth + "px";
          rowArr[findindex] += ele.offsetHeight;
      });
      this.waterfallHeight = Math.max(...rowArr);
    },
  },
};
</script>

<style lang="less" scoped>
.waterfall {
  position: relative;
  .image {
    position: absolute;
    .img {
      height: auto;
      display: block;
    }
  }
}
</style>