css grid+vue实现瀑布流

要使用CSS grid和Vue.js来实现瀑布流，可以按照以下步骤进行：

1. 在Vue组件中，使用v-for指令遍历数据，并将每个数据项渲染为一个包含图片的div。

2. 在CSS中，使用grid布局来创建网格布局。可以使用grid-template-columns属性来定义列的宽度，并使用grid-auto-rows属性来定义每个网格的高度。

3. 为了实现瀑布流布局，可以使用grid-auto-flow属性，并将其设置为dense。这将允许网格填充空白位置，从而创建更紧凑的布局。

4. 在Vue组件中，可以使用计算属性来计算每个图片div的高度。这可以通过使用一个方法来获取每个图片的实际高度，并返回一个包含所有高度的数组。

5. 最后，在CSS中，使用grid-row-end属性来设置每个图片div的结束行。可以使用一个循环来为每个图片div设置正确的结束行。

以下是一个简单的示例代码：

<template>
  <div class="grid-container">
    <div v-for="(item, index) in itemList" :key="index" class="grid-item" :style="{ 'grid-row-end': gridRowEnds[index] }">
      <img :src="item.src" @load="setImageHeight(index)" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { src: 'image1.jpg' },
        { src: 'image2.jpg' },
        { src: 'image3.jpg' },
        { src: 'image4.jpg' },
        { src: 'image5.jpg' },
      ],
      imageHeights: [],
    };
  },
  computed: {
    gridRowEnds() {
      const gridRowEnds = [];
      let currentRow = 1;
      let rowHeights = [0, 0];
      for (let i = 0; i < this.itemList.length; i++) {
        const imageHeight = this.imageHeights[i];
        const shortestIndex = rowHeights[0] < rowHeights[1] ? 0 : 1;
        gridRowEnds[i] = `row-end ${currentRow + imageHeight}px`;
        rowHeights[shortestIndex] += imageHeight;
        if (rowHeights[0] === rowHeights[1]) {
          currentRow += imageHeight;
          rowHeights = [0, 0];
        }
      }
      return gridRowEnds;
    },
  },
  methods: {
    setImageHeight(index) {
      const image = this.$el.querySelectorAll('.grid-item img')[index];
      if (image) {
        this.imageHeights[index] = image.offsetHeight;
      }
    },
  },
};
</script>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
}

.grid-item {
  margin: 10px;
  overflow: hidden;
}
</style>

这个示例代码假设所有图片都有相同的宽度，但高度可能不同。在计算属性中，我们使用一个循环来为每个图片div设置正确的结束行。我们还使用一个方法来获取每个图片的实际高度，并将其存储在一个数组中。最后，在CSS中，我们使用了grid布局来创建网格布局，并使用grid-row-end属性来设置每个图片div的结束行。