vue实现grid图片列表

Vue 实现 Grid 图片列表

使用 Vue 实现 Grid 图片列表可以通过多种方式完成，以下是几种常见的方法：

使用 CSS Grid 布局

通过 CSS Grid 可以快速实现一个响应式的图片网格布局。在 Vue 模板中绑定图片数据，结合 CSS Grid 实现排列。

<template>
  <div class="image-grid">
    <div v-for="(image, index) in images" :key="index" class="image-item">
      <img :src="image.url" :alt="image.alt" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'image1.jpg', alt: 'Image 1' },
        { url: 'image2.jpg', alt: 'Image 2' },
        // 更多图片数据
      ]
    };
  }
};
</script>

<style>
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.image-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
</style>

使用 Flexbox 布局

Flexbox 是另一种实现网格布局的方式，适合简单的图片列表需求。

<template>
  <div class="image-flex-container">
    <div v-for="(image, index) in images" :key="index" class="image-flex-item">
      <img :src="image.url" :alt="image.alt" />
    </div>
  </div>
</template>

<style>
.image-flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.image-flex-item {
  flex: 1 1 200px;
}

.image-flex-item img {
  width: 100%;
  height: auto;
}
</style>

使用第三方库

如果需要更复杂的功能（如懒加载、瀑布流等），可以借助第三方库如 vue-waterfall 或 masonry-layout。

<template>
  <vue-waterfall :list="images" :gutter="16">
    <template v-slot:item="{ item }">
      <img :src="item.url" :alt="item.alt" />
    </template>
  </vue-waterfall>
</template>

<script>
import VueWaterfall from 'vue-waterfall';

export default {
  components: { VueWaterfall },
  data() {
    return {
      images: [
        { url: 'image1.jpg', alt: 'Image 1' },
        { url: 'image2.jpg', alt: 'Image 2' },
      ]
    };
  }
};
</script>

动态加载图片

结合异步加载图片数据，可以从 API 获取图片列表并动态渲染。

<template>
  <div class="image-grid">
    <div v-for="(image, index) in images" :key="index" class="image-item">
      <img :src="image.url" :alt="image.alt" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  async created() {
    const response = await fetch('https://api.example.com/images');
    this.images = await response.json();
  }
};
</script>

响应式设计

通过监听窗口大小变化，动态调整网格列数以适配不同屏幕尺寸。

<template>
  <div class="image-grid" :style="{ 'grid-template-columns': `repeat(${columns}, 1fr)` }">
    <div v-for="(image, index) in images" :key="index" class="image-item">
      <img :src="image.url" :alt="image.alt" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: 'image1.jpg', alt: 'Image 1' },
        { url: 'image2.jpg', alt: 'Image 2' },
      ],
      columns: 3
    };
  },
  mounted() {
    window.addEventListener('resize', this.updateColumns);
    this.updateColumns();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateColumns);
  },
  methods: {
    updateColumns() {
      if (window.innerWidth < 600) {
        this.columns = 2;
      } else if (window.innerWidth < 900) {
        this.columns = 3;
      } else {
        this.columns = 4;
      }
    }
  }
};
</script>

以上方法可以根据具体需求选择，CSS Grid 和 Flexbox 适合简单场景，而第三方库适合复杂功能需求。