Vue 瀑布流实现：巧妙运用 nextTick 辅助计算 DOM 高度

2024-01-24 14:09:28

瀑布流布局是网页设计中常见的一种布局方式，因其美观和易用而备受青睐。在 Vue 中，实现瀑布流有许多种方法，本文将介绍一种基于 DOM 高度自动计算的实现方案。

Vue 瀑布流实现

首先，我们来看一下效果图：

[图片]

我们的列表是由图片和文字组成，一般的，图片是确定高度的（就算不清楚我们也可以临时加载然后判断），但是文字的高度是根据内容来决定的，所以会造成高度不一致。
瀑布流的实现核心就是让图片和文字实现类似于flex布局，自动根据内容撑开，实现这样的效果。

实现方案

要实现这个效果，我们需要用到 Vue 的 nextTick 函数。nextTick 函数可以确保在一个更新周期内所有异步任务都执行完成之后再执行回调函数。

<template>
  <div class="waterfall">
    <div v-for="item in items" :key="item.id" class="item">
      <img :src="item.image" alt="">
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

import { nextTick } from 'vue'

export default {
  data() {
    return {
      items: [
        { id: 1, image: 'image1.jpg', content: '这是一段文字1' },
        { id: 2, image: 'image2.jpg', content: '这是一段文字2' },
        { id: 3, image: 'image3.jpg', content: '这是一段文字3' },
      ]
    }
  },
  mounted() {
    nextTick(() => {
      this.calculateHeights()
    })
  },
  methods: {
    calculateHeights() {
      const items = this.$el.querySelectorAll('.item')
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        const imageHeight = item.querySelector('img').offsetHeight
        const contentHeight = item.querySelector('p').offsetHeight
        const height = imageHeight + contentHeight
        item.style.height = `${height}px`
      }
    }
  }
}

在代码中，我们首先使用 nextTick 函数来确保所有 DOM 元素都已渲染完成，然后调用 calculateHeights 方法来计算每个列表项的高度。在 calculateHeights 方法中，我们遍历所有的列表项，然后分别获取图片和文字的高度，并计算出列表项的总高度。最后，我们将总高度设置给列表项的 height 属性，这样就实现了瀑布流的效果。