Waterfall / 瀑布流布局

瀑布流布局组件。

特性

支持自动计算元素大小

支持懒加载

基础用法

一个支持懒加载的瀑布流布局只有在元素的高度是已知的情况下才能正常工作。因此，需要传入 items 对象，其中有高度和宽度的信息。

<script setup lang="ts">
const tmps = ref(Array.from({ length: 20 }))
const heights = [50, 100, 200, 300, 400]
const width = 100
const items = computed(() => tmps.value.map(() => {
  const height = heights[Math.floor(Math.random() * heights.length)]
  return {
    width,
    height,
    src: `https://picsum.photos/${width}/${height}?random=${Math.random()}`,
  }
}))
</script>
<template>
  <div class="relative h-full w-full p-2">
    <LazyWaterfall
      style="height: 300px; overflow-y: scroll"
      :gap="4"
      :item-width="width"
      :items="items"
    >
      <img
        v-for="item, i in items"
        :key="i"
        :src="item.src"
        :style="{
          display: 'inline-block',
          height: '100%'',
          backgroundImage: `url(${item.src})`,
        }"
      >
    </LazyWaterfall>
  </div>
</template>

自定义滚动

waterfall 布局一般会内置一个滚动条，但是如果你想要自定义滚动条，可以使用轻松使用 ScrollArea 组件替代之。

<script setup lang="ts">
const tmps = ref(Array.from({ length: 20 }))
const heights = [50, 100, 200, 300, 400]
const width = 100
const items = computed(() => tmps.value.map(() => {
  const height = heights[Math.floor(Math.random() * heights.length)]
  return {
    width,
    height,
    src: `https://picsum.photos/${width}/${height}?random=${Math.random()}`,
  }
}))
</script>
<template>
  <div class="relative h-full w-full p-2">
    <LazyWaterfall
      :is="ScrollArea"
      :gap="4"
      :item-width="width"
      :items="items"
    >
      <img
        v-for="item, i in items"
        :key="i"
        :src="item.src"
        :style="{
          display: 'inline-block',
          height: '100%'',
          backgroundImage: `url(${item.src})`,
        }"
      >
    </LazyWaterfall>
  </div>
</template>