A Vue 3 virtual waterfall component
pnpm add @lhlyu/vue-virtual-waterfall
import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
import VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall' app.use(VueVirtualWaterfall)
<template>
<VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight">
<template #default="{ item }: { item: ItemOption }">
<div class="card">
<img :src="item.img" />
</div>
</template>
</VirtualWaterfall>
</template>
The VirtualWaterfall component wants to implement a virtual list, and the container that wraps it must indicate a fixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height of the body also needs to be specified. The scrolling event can be bound to the window
[number, number] [0, 0] Preload screen count [above, below] itemMinWidth number 220 Minimum width for each item maxColumnCount number 10 Maximum number of columns minColumnCount number 2 Minimum number of columns items any[] [] Data calcItemHeight (item: any, itemWidth: number) => number (item: any, itemWidth: number) => 250 Method to calculate item height
{ item: any, index: number } Custom default content
(cb: (spaces: readonly SpaceOption[]) => Promise<void> | void) Read Item Spaces Info
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4