vue 瀑布流实现

实现 Vue 瀑布流布局

使用 CSS Grid 实现

CSS Grid 提供了一种简单的方式实现瀑布流布局，但需要手动设置行和列的跨度。

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

<style>
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 15px;
}

.masonry-item {
  grid-row-end: span var(--row-span);
}
</style>

使用 CSS Columns 实现

CSS 多列布局可以自动创建瀑布流效果，但列的顺序是垂直排列的。

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

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

.masonry-item {
  break-inside: avoid;
  margin-bottom: 15px;
}
</style>

使用第三方库 vue-masonry

vue-masonry 是一个专门为 Vue 设计的瀑布流插件，使用起来更加方便。

安装：

npm install vue-masonry --save

使用：

import { VueMasonryPlugin } from 'vue-masonry';

Vue.use(VueMasonryPlugin);

<template>
  <div v-masonry transition-duration="0.3s" item-selector=".masonry-item">
    <div v-masonry-tile v-for="(item, index) in items" :key="index" class="masonry-item">
      <img :src="item.image" :alt="item.title">
      <h3>{{ item.title }}</h3>
    </div>
  </div>
</template>

动态计算高度实现

对于需要精确控制布局的场景，可以通过 JavaScript 动态计算每个项目的位置。

methods: {
  layoutMasonry() {
    const container = this.$el;
    const items = container.querySelectorAll('.masonry-item');
    const columnWidth = 250;
    const gap = 15;
    const containerWidth = container.offsetWidth;
    const columnCount = Math.floor(containerWidth / (columnWidth + gap));
    const columns = Array(columnCount).fill(0);

    items.forEach(item => {
      const minColumnIndex = columns.indexOf(Math.min(...columns));
      const left = minColumnIndex * (columnWidth + gap);
      const top = columns[minColumnIndex];

      item.style.position = 'absolute';
      item.style.left = `${left}px`;
      item.style.top = `${top}px`;
      item.style.width = `${columnWidth}px`;

      columns[minColumnIndex] += item.offsetHeight + gap;
    });

    container.style.height = `${Math.max(...columns)}px`;
  }
},
mounted() {
  this.layoutMasonry();
  window.addEventListener('resize', this.layoutMasonry);
},
beforeDestroy() {
  window.removeEventListener('resize', this.layoutMasonry);
}

响应式处理

为了使瀑布流布局在不同屏幕尺寸下都能良好显示，可以添加响应式处理。

data() {
  return {
    columnCount: 3
  }
},
created() {
  this.updateColumnCount();
  window.addEventListener('resize', this.updateColumnCount);
},
methods: {
  updateColumnCount() {
    const width = window.innerWidth;
    if (width < 768) {
      this.columnCount = 1;
    } else if (width < 1024) {
      this.columnCount = 2;
    } else {
      this.columnCount = 3;
    }
    this.layoutMasonry();
  }
}

以上方法提供了多种实现 Vue 瀑布流布局的方式，从简单的 CSS 方案到更复杂的 JavaScript 计算方案，可以根据项目需求选择最适合的方法。