Virtual scrolling
Only visible tiles plus a configurable buffer are rendered for smooth infinite feeds.
Vue WFVirtualized waterfall layout for Vue 3
Build responsive masonry galleries that stay smooth with big data sets.
Skip to content
Why Vue WF
Vue WF focuses on rendering efficiency for media-heavy grids. It pairs a simple prop-driven API with virtualization so you can keep interaction snappy even when streaming hundreds of photos or cards.
Hosted links
- Documentation: https://vue-wf.jannchie.com
- Playground demo: https://vue-wf.playground.jannchie.com
Quick sample
vue
<script setup lang="ts">
import Waterfall from 'vue-wf'
const tmps = Array.from({ length: 100 })
const heights = [50, 100, 200, 300, 400]
const width = 100
const items = tmps.map(() => {
const height = heights[Math.floor(Math.random() * heights.length)]
return {
width,
height,
src: `https://picsum.photos/${width}/${height}?random=${Math.random()}`,
}
})
</script>
<template>
<Waterfall
:wrapper-width="400"
:item-width="width"
:gap="20"
>
<div
v-for="item, i in items"
:key="i"
:style="{
height: `${item.height / item.width * 100}px`,
backgroundImage: `url(${item.src})`,
}"
/>
</Waterfall>
</template>What you get
- Type-safe props for layout tuning and virtualization buffers
- Works with any content node you render in each item slot
- Ready-to-build documentation with
pnpm docs:devandpnpm docs:build