前端瀑布流（通过高和定位实现）

PS：即取即用

<template>
  <div class="waterfall">
    <p class="name">瀑布流</p>
    <div class="list">
      <div
        class="content"
        v-for="(item, index) in list"
        :key="index"
        :style="{
          width: item.width + 'vw',
          height: item.height + 'vw',
          left: item.left + 'vw',
          top: item.top + 'vw',
        }"
        ref="col"
      >
        <img :src="item.image" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
const space = 4; // 图片间隙
let leftH = 0; // 左边栏总高度
let rightH = 0; // 右边栏总高度
export default {
  data() {
    return {
      // 图片对象数组
      list: [
        {
          image: require("./../assets/head.jpg"),
          width: 44,
          height: 40,
          top: 0,
          left: 0,
        },
        {
          image: require("./../assets/head.jpg"),
          width: 44,
          height: 70,
          top: 0,
          left: 0,
        },
        {
          image: require("./../assets/head.jpg"),
          width: 44,
          height: 80,
          top: 0,
          left: 0,
        },
        {
          image: require("./../assets/head.jpg"),
          width: 44,
          height: 30,
          top: 0,
          left: 0,
        },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {
    // 整理数据
    this.waterfall();
  },
  methods: {
    // 整理数据--依据高度和定位
    waterfall() {
      for (let i = 0; i < this.list.length; i++) {
        let top;
        let left;
        if (leftH > rightH) {
          left = space * 2 + this.list[i].width;
          top = rightH + space;
          rightH += space + this.list[i].height;
        } else {
          left = space;
          top = leftH + space;
          leftH += space + this.list[i].height;
        }
        console.log(top, "top");

        this.list[i].top = top;
        this.list[i].left = left;
      }

      console.log(this.list, "list");
    },
  },
};
</script>
<style lang="scss" scoped>
.waterfall {
  width: 100vw;

  .name {
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    margin: 3vw 0;
  }

  .list {
    position: relative;
    width: 100vw;

    .content {
      position: absolute;
      top: 100%;

      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>