interface VirtualItem {
  id: string
  data: any
  height: number
  top: number
  column: number
}
 
const virtualPool = ref<VirtualItem[]>([])
const visibleItems = ref<Set<string>>(new Set())

<template>
  <div class="waterfall-container" ref="container">
    <div v-for="col in columns" :key="col" class="column" />
  </div>
</template>
 
<script setup>
const container = ref<HTMLElement>()
const columns = ref(3)
 
onMounted(() => {
  const observer = new ResizeObserver(entries => {
    columns.value = Math.floor(entries[0].contentRect.width / 300)
  })
  observer.observe(container.value)
})
</script>

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) {
        // 元素離開(kāi)視口頂部時(shí)記錄位置并銷毀
        recordPosition(id)
        visibleItems.value.delete(id)
      }
    }
  })
}, {
  root: null,
  rootMargin: '200px 0px',
  threshold: 0.1
})

<template v-for="col in columns" :key="col" class="column">
  <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>

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)
    })
  })
}

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 // 默認(rèn)高度
}

<template>
  <div class="masonry-container" ref="container">
    <div v-for="(col, index) in columns" :key="index" class="masonry-column" :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)
 
    // 計(jì)算列寬
    const columnWidth = computed(() => {
      if (!container.value) return 0
      const totalGutter = (activeColumns.value - 1) * props.gutter
      return (container.value.offsetWidth - totalGutter) / activeColumns.value
    })
 
    // 響應(yīng)式斷點(diǎn)處理
    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
        ]
 
        // 觸發(fā)單個(gè)元素定位事件
        emit('item-positioned', {
          element: newItem,
          position: {
            x: columnIndex * (columnWidth.value + props.gutter),
            y: minHeight
          }
        })
 
        // 更新列高度（假設(shè)已獲取元素高度）
        columnHeights.value[columnIndex] += item._height + props.gutter
      })
 
      // 觸發(fā)布局完成事件
      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)
    })
 
    // 監(jiān)聽(tīng)相關(guān)變化
    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>

<template>
  <MasonryLayout 
    :items="items" 
    @layout-complete="handleLayoutComplete"
  >
    
  </MasonryLayout>
</template>
 
<script setup>
import { onMounted } from 'vue'
 
const handleLayoutComplete = ({ columns, containerHeight }) => {
  console.log(`當(dāng)前列數(shù)：${columns}，容器高度：${containerHeight}px`)
}
 
// 滾動(dòng)加載更多
window.addEventListener('scroll', () => {
  if (nearBottom()) {
    items.value = [...items.value, ...newItems]
  }
})
</script>