https://github.com/jannchie/vue-wf
Vue waterfall layout
https://github.com/jannchie/vue-wf
Last synced: 5 months ago
JSON representation
Vue waterfall layout
- Host: GitHub
- URL: https://github.com/jannchie/vue-wf
- Owner: Jannchie
- Created: 2023-09-29T12:07:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-14T12:40:04.000Z (5 months ago)
- Last Synced: 2026-01-14T16:50:16.850Z (5 months ago)
- Language: Vue
- Homepage: https://vue-wf-docs.vercel.app
- Size: 1.41 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Vue WF
[](https://codetime.dev)
## Sites
- Documentation: https://vue-wf.jannchie.com
- Playground demo: https://vue-wf.playground.jannchie.com
## Install
```bash
pnpm install vue-wf
```
## Usage
```vue
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()}`,
}
})
```
### Props
- `item-padding`: extra space around each item (useful for captions or badges). Accepts a number for both axes or an object `{ x, y }`. The legacy `y-gap` prop now maps to `item-padding.y`.
- `items`: array of `{ width, height }` objects. Both fields are required numbers and are validated at runtime.
### Virtual rendering tips
- Set the outer container to a fixed height with `overflow: auto` (e.g., `height: 100vh; overflow: auto;`). This allows the component to measure the viewport and only render items inside (plus the `rangeExpand` buffer).
- If `rangeExpand` is set to `0`, only the items currently in view are rendered. Increase it to preload items above/below the viewport for smoother scrolling.
## Packages
- `packages/vue-wf`: core library source and build artifacts.
- `packages/docs`: VitePress documentation site.
- `packages/playground`: interactive playground project.
## Development
```bash
pnpm install
pnpm build
pnpm dev:all
```