vue实现瀑布流

案例：

<template>
  <div class="page-main">
    <div class="card">
      <div
        class="card-item"
        v-for="(item, index) in cardList"
        :key="index"
        :style="[
          { background: item.color },
          { height: item.height },
          { lineHeight: item.height },
        ]"
      >
        <p class="text">{{ index }}</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      cardList: [
        {
          color: "#02a6b5",
          height: "100px",
        },
        {
          color: "#ffeb7b",
          height: "40px",
        },
        {
          color: "#aaa",
          height: "140px",
        },
        {
          color: "#5bc0de",
          height: "100px",
        },
        {
          color: "#06c",
          height: "56px",
        },
        {
          color: "#4471f4",
          height: "50px",
        },
        {
          color: "#49bcf7",
          height: "120px",
        },
        {
          color: "#dee3ec",
          height: "30px",
        },
        {
          color: "#ffeb7b",
          height: "90px",
        },
        {
          color: "#0095cd",
          height: "100px",
        },
        {
          color: "#0076a3",
          height: "60px",
        },
        {
          color: "#FCCF0A",
          height: "50px",
        },
      ],
    };
  },
};
</script>

<style scoped>
.page-main {
  background: #ffffff;
  padding: 0 30px;
}
.card {
  /* 定义4列 */
  column-count: 4;
  /* 列与列的距离为20px */
  column-gap: 20px;
}
.card-item {
  text-align: center;
  width: auto;
  border-radius: 16px;
  grid-row-start: auto;
  margin-bottom: 20px;
  /* 不被截断 默认值是auto，会被截断 */
  break-inside: avoid;
}
.card-item p {
  margin: 0;
}
</style>

效果：