前端实战：基于 Vue3 实现无限滚动、懒加载与瀑布流模块及优化策略

3. 动态渲染与销毁机制

Intersection Observer 配置，创建双阈值观察器（顶部/底部）：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const id = entry.target.dataset.id
    if (entry.isIntersecting) {
      visibleItems.value.add(id)
    } else {
      if (entry.boundingClientRect.top < entry.rootBounds!.top) {
        // 元素离开视口顶部时记录位置并销毁
        recordPosition(id)
        visibleItems.value.delete(id)
      }
    }
  })
}, { root: null, rootMargin: '200px 0px', threshold: 0.1 })

DOM 生命周期管理，通过动态组件实现条件渲染：

<template v-for="col in columns" :key="col">
  <div v-for="item in getColumnItems(col)" :key="item.id">
    <component :is="visibleItems.has(item.id) ? 'RealComponent' : 'Placeholder'" :data-id="item.id" :data="item.data" />
  </div>
</template>

4. 无限滚动实现

滚动事件节流处理使用 requestAnimationFrame 优化性能：

const checkScroll = () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement
  if (scrollHeight - (scrollTop + clientHeight) < 500) {
    loadMoreItems()
  }
}
window.addEventListener('scroll', () => {
  requestAnimationFrame(checkScroll)
})

数据分页加载：

const loadMoreItems = async () => {
  const lastItem = virtualPool.value[virtualPool.value.length - 1]
  const newItems = await fetchItems({ offset: virtualPool.value.length, position: lastItem?.top || 0 })
  newItems.forEach(item => {
    virtualPool.value.push({ ...item, height: 0, // 初始占位高度 top: calculateInitialPosition(item) })
  })
}

5. 内存优化策略

使用 Map 结构存储已销毁元素的位置信息：

const positionCache = new Map<string, { top: number, column: number }>()
const recordPosition = (id: string) => {
  const element = document.querySelector(`[data-id="${id}"]`)
  if (element) {
    positionCache.set(id, { top: element.getBoundingClientRect().top + window.scrollY, column: parseInt(element.parentElement!.dataset.column!) })
  }
}

基于历史数据预测未加载元素的高度：

const predictHeight = (dataType: string) => {
  const history = virtualPool.value
    .filter(item => item.data.type === dataType)
    .map(item => item.height)
  return history.length > 0 ? Math.ceil(history.reduce((a,b) => a+b)/history.length) : 200 // 默认高度
}

如果还有更多需求，继续人机交互完善代码即可，核心是我提供的思路 + 强力的 AI 工具，剩下的就是时间问题。

四、最终代码呈现

1. 组件代码

<template>
  <div ref="container">
    <div v-for="(col, index) in columns" :key="index" :style="{ width: columnWidth + 'px', marginRight: gutter + 'px' }">
      <div v-for="item in columnItems[index]" :key="item._uid" :class="itemClass" :style="{ transition: `all ${transitionDuration}ms ease`, transform: `translateY(${item.y}px)` }" @transitionend="handleTransitionEnd(item)">
        <slot name="item" :item="item.data"></slot>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'
export default {
  props: {
    items: { type: Array, required: true },
    columns: { type: Number, default: 2 },
    gutter: { type: Number, default: 8 },
    breakpoints: { type: Object, default: () => ({}) },
    resizeObserver: { type: Boolean, default: true },
    useImageLoader: { type: Boolean, default: true },
    itemClass: { type: String, default: 'masonry-item' },
    transitionDuration: { type: Number, default: 300 }
  },
  emits: ['layout-complete', 'item-positioned'],
  setup(props, { emit }) {
    const container = ref(null)
    const columnHeights = ref([])
    const columnItems = ref([])
    const activeColumns = ref(props.columns)
    const observer = ref(null)

    // 计算列宽
    const columnWidth = computed(() => {
      if (!container.value) return 0
      const totalGutter = (activeColumns.value - 1) * props.gutter
      return (container.value.offsetWidth - totalGutter) / activeColumns.value
    })

    // 响应式断点处理
    const handleBreakpoints = () => {
      const breakpoints = Object.entries(props.breakpoints).sort((a, b) => b[0] - a[0])
      const width = window.innerWidth
      for (const [bp, cols] of breakpoints) {
        if (width >= bp) {
          activeColumns.value = cols
          return
        }
      }
      activeColumns.value = props.columns
    }

    // 布局核心算法
    const layoutItems = () => {
      columnHeights.value = new Array(activeColumns.value).fill(0)
      columnItems.value = new Array(activeColumns.value).fill([])
      props.items.forEach(item => {
        const minHeight = Math.min(...columnHeights.value)
        const columnIndex = columnHeights.value.indexOf(minHeight)
        const newItem = { ...item, y: minHeight, _uid: Math.random().toString(36).substr(2, 9) }
        columnItems.value[columnIndex] = [...columnItems.value[columnIndex], newItem]
        // 触发单个元素定位事件
        emit('item-positioned', { element: newItem, position: { x: columnIndex * (columnWidth.value + props.gutter), y: minHeight } })
        // 更新列高度（假设已获取元素高度）
        columnHeights.value[columnIndex] += item._height + props.gutter
      })
      // 触发布局完成事件
      emit('layout-complete', { columns: activeColumns.value, containerHeight: Math.max(...columnHeights.value) })
    }

    // 图片加载处理
    const loadImages = () => {
      if (!props.useImageLoader) return
      props.items.forEach(item => {
        const img = new Image()
        img.src = item.image
        img.onload = () => {
          item._height = (columnWidth.value * img.height) / img.width
          layoutItems()
        }
      })
    }

    // 初始化
    onMounted(() => {
      handleBreakpoints()
      loadImages()
      layoutItems()
      if (props.resizeObserver) {
        observer.value = new ResizeObserver(() => {
          handleBreakpoints()
          layoutItems()
        })
        observer.value.observe(container.value)
      }
      window.addEventListener('resize', handleBreakpoints)
    })

    onBeforeUnmount(() => {
      if (observer.value) observer.value.disconnect()
      window.removeEventListener('resize', handleBreakpoints)
    })

    // 监听相关变化
    watch(() => props.items, layoutItems)
    watch(activeColumns, layoutItems)

    return { container, columnWidth, columnItems }
  }
}
</script>
<style>
.masonry-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
.masonry-column {
  transition: all 0.3s ease;
}
.masonry-item {
  position: absolute;
  width: 100%;
  will-change: transform;
}
</style>

2. 组件用法

<template>
  <MasonryLayout :items="items" @layout-complete="handleLayoutComplete" />
</template>
<script setup>
import { onMounted } from 'vue'
const handleLayoutComplete = ({ columns, containerHeight }) => {
  console.log(`当前列数：${columns}，容器高度：${containerHeight}px`)
}
// 滚动加载更多
window.addEventListener('scroll', () => {
  if (nearBottom()) {
    items.value = [...items.value, ...newItems]
  }
})
</script>

五、结语

瀑布流 + 无限滚动 + 懒加载的结合能够提升用户体验和页面性能：瀑布流以错落有致的布局呈现内容，增加视觉吸引力；无限滚动让用户无需翻页即可持续浏览，提高交互流畅性；懒加载则延迟加载非可视区域的内容，减少初始加载时间与资源消耗，从而实现高效、动态且美观的内容展示。

只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。