vue实现瀑布流布局

使用CSS Grid实现瀑布流布局

CSS Grid是一种现代布局方式，可以轻松实现瀑布流效果。通过设置grid-auto-flow: dense和grid-template-columns属性，让元素自动填充空白区域。

<template>
  <div class="waterfall-container">
    <div v-for="(item, index) in items" :key="index" class="waterfall-item">
      <img :src="item.image" :alt="item.title">
      <h3>{{ item.title }}</h3>
    </div>
  </div>
</template>

<style>
.waterfall-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 15px;
}

.waterfall-item {
  break-inside: avoid;
}
</style>

使用CSS Columns实现瀑布流

CSS的多列布局是另一种实现方式，通过设置column-count和column-gap属性来创建多列布局。

<template>
  <div class="waterfall-columns">
    <div v-for="(item, index) in items" :key="index" class="column-item">
      <img :src="item.image" :alt="item.title">
      <h3>{{ item.title }}</h3>
    </div>
  </div>
</template>

<style>
.waterfall-columns {
  column-count: 3;
  column-gap: 15px;
}

.column-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
  break-inside: avoid;
}
</style>

使用第三方库Masonry

Masonry是一个流行的瀑布流布局库，可以配合Vue使用。需要先安装masonry-layout库。

npm install masonry-layout

<template>
  <div ref="grid" class="grid">
    <div v-for="(item, index) in items" :key="index" class="grid-item">
      <img :src="item.image" :alt="item.title">
      <h3>{{ item.title }}</h3>
    </div>
  </div>
</template>

<script>
import Masonry from 'masonry-layout'

export default {
  mounted() {
    new Masonry(this.$refs.grid, {
      itemSelector: '.grid-item',
      columnWidth: 200,
      gutter: 15
    })
  }
}
</script>

<style>
.grid {
  width: 100%;
}

.grid-item {
  width: 200px;
  margin-bottom: 15px;
}
</style>

使用VueWaterfall插件

VueWaterfall是一个专为Vue设计的瀑布流组件，简化了实现过程。需要先安装vue-waterfall。

npm install vue-waterfall

<template>
  <waterfall :col="3" :data="items">
    <template>
      <div class="cell-item" v-for="(item, index) in items" :key="index">
        <img :src="item.image" :alt="item.title">
        <h3>{{ item.title }}</h3>
      </div>
    </template>
  </waterfall>
</template>

<script>
import VueWaterfall from 'vue-waterfall'

export default {
  components: {
    Waterfall: VueWaterfall
  }
}
</script>

<style>
.cell-item {
  margin-bottom: 15px;
}
</style>

动态加载数据实现无限滚动

结合无限滚动技术，可以在用户滚动到页面底部时自动加载更多数据，增强用户体验。

<template>
  <div class="waterfall-container" @scroll="handleScroll">
    <div v-for="(item, index) in items" :key="index" class="waterfall-item">
      <img :src="item.image" :alt="item.title">
      <h3>{{ item.title }}</h3>
    </div>
    <div v-if="loading" class="loading">Loading...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      page: 1
    }
  },
  methods: {
    handleScroll() {
      const container = document.querySelector('.waterfall-container')
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
        this.loadMore()
      }
    },
    loadMore() {
      if (this.loading) return
      this.loading = true
      // 模拟API调用
      setTimeout(() => {
        this.items.push(...newItems)
        this.page++
        this.loading = false
      }, 1000)
    }
  }
}
</script>

每种方法都有其适用场景，CSS Grid和Columns适合简单布局，Masonry和VueWaterfall提供更多自定义选项，无限滚动则增强了用户体验。根据项目需求选择最合适的实现方式。