vue3实现自适应瀑布流

要实现自适应瀑布流布局，可以使用 Vue 3 结合 CSS Grid 来实现。下面是一个简单的示例：

首先，在你的 Vue 组件中引入 CSS 样式，可以使用 Sass 或者普通的 CSS 文件。

<template>
  <div class="waterfall">
    <div v-for="(item, index) in items" :key="index" class="item">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 假设有10个项目
    };
  },
};
</script>

<style scoped>
.waterfall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // 自适应列宽度，最小宽度200px
  gap: 10px; // 列之间的间隔
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

在上面的示例中，我们使用了CSS Grid布局来实现瀑布流效果。在父容器 `.waterfall` 中，我们使用 `grid-template-columns` 设置列的宽度为自适应，并且最小宽度为200px。这样可以保证在较小的屏幕上，列的宽度不会太小而无法显示内容。

然后，我们在 `v-for` 循环中创建了多个子项，每个子项都具有相同的类名 `.item`。这些子项会自动根据列宽度进行排列，并且使用 `gap` 属性设置了列之间的间隔。

这样，当项目数量超过一行的容纳范围时，会自动换行，并且保持每一列的宽度一致。这就实现了自适应瀑布流布局。