vue实现grid图片列表

实现思路

在Vue中实现Grid图片列表，通常结合CSS Grid布局或第三方组件库（如Element UI、Ant Design Vue等）。以下是两种常见实现方式。

纯CSS Grid实现

通过Vue动态渲染图片数据，结合CSS Grid布局控制排列。

<template>
  <div class="image-grid">
    <div v-for="(image, index) in images" :key="index" class="grid-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;
  padding: 16px;
}

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

使用Element UI的el-row/el-col

通过响应式栅格系统实现更灵活的布局控制。

<template>
  <el-row :gutter="20">
    <el-col 
      v-for="(image, index) in images" 
      :key="index" 
      :xs="12" 
      :sm="8" 
      :md="6" 
      :lg="4"
    >
      <div class="image-card">
        <img :src="image.url" :alt="image.alt">
        <div class="image-title">{{ image.title }}</div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { ElRow, ElCol } from 'element-ui'

export default {
  components: { ElRow, ElCol },
  data() {
    return {
      images: [
        { url: 'image1.jpg', alt: 'Image 1', title: 'Title 1' },
        // 更多图片数据...
      ]
    }
  }
}
</script>

<style>
.image-card {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.image-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.image-title {
  padding: 10px;
  text-align: center;
}
</style>

图片懒加载优化

对于大量图片，建议实现懒加载提升性能。

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

<script>
import VueLazyload from 'vue-lazyload'

export default {
  directives: {
    lazy: VueLazyload.directive
  },
  data() {
    return {
      images: [
        // 图片数据...
      ]
    }
  }
}
</script>

<style>
.lazy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.lazy-image {
  width: 100%;
  height: 200px;
  background: #f5f5f5;
  object-fit: cover;
}

img[lazy=loading] {
  opacity: 0.5;
}
</style>

响应式断点设置

通过媒体查询实现不同屏幕尺寸下的列数调整。

.image-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 600px) {
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}