vue3中的瀑布流布局

在 Vue3 中，实现瀑布流布局通常会用到 CSS Grid 或 Flexbox 结合 Vue 的响应式组件特性。这里简单介绍一下如何使用 CSS Grid 实现瀑布流布局：

1. CSS Grid 定义：CSS Grid 提供了一种强大的二维布局系统，你可以设置行和列的数量以及大小，非常适合做瀑布流布局。首先创建网格容器，然后定义网格轨道（grid-template-columns）和网格区域（grid-template-rows）。

<div class="grid-container">
  <div v-for="item in items" :key="item.id" :class="{ 'item': true, 'flow-item': true }">
    <!-- item 元素 -->
  </div>
</div>

2. CSS 样式：为 `.grid-container` 设置 `display: grid;`，设置合适的网格轨道宽度，并且让 `.flow-item` 自动适应列宽。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.flow-item {
  background-color: #eee;
  padding: 20px;
}

3. Vue 部分：在 Vue 组件中，使用 `v-for` 指令遍历数据数组（假设 `items` 是包含图片 URL 或其他需要展示内容的数组），动态绑定样式类。

4. 响应式调整：为了适应不同屏幕尺寸，你可以在 Vue 中监听窗口大小变化，调整 CSS Grid 的列数或轨道大小。

export default {
  data() {
    return {
      items: [], // 初始化你的数据
    };
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 更新网格列数以适应新的视口尺寸
    }
  }
};