Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Balanced Waterfall Gallery Block for Vue

A waterfall of twelve drawn pictures in two, three or four columns on shared hairlines, a switch between shortest-column and round-robin flow, and bars under the wall that read each column's height.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A waterfall wall for Vue with Ark UI. Twelve drawn pictures are placed in separate columns on shared hairlines, inside a scrolling window of fixed height. A "Columns" group sets two, three or four columns, and a "Shortest column first" switch chooses the flow: on, each picture goes to the column that is shortest so far; off, the columns are filled in turn. Under the window a ruled band has one bar per column and a readout such as "Heights 1200, 1159, 1159 px, 41 px apart", worked out from the width the wall really has. Each caption carries the picture's place in the reading order. On a phone the wall is two columns in one flow and the controls are hidden. The pictures are drawn in the theme's greys, never photographed. It's built from Guides, Toggle Group and Switch. For image feeds, shops and any wall where even columns matter.

FAQ

How are the columns balanced?

Placements for every column count and both flows are worked out once at module scope, from each picture's ratio, so rendering only picks one. Shortest-first adds each picture to the column with the least height so far; round-robin deals them out in turn. The pictures' ratios are chosen so the two differ clearly.

Where do the heights come from?

A ResizeObserver measures the wall, and each column's height is the sum of its pictures' heights at the width they really have, plus captions, gaps and padding. Until it has measured, the readout uses the widest case.

Why does the wall scroll inside a window?

More columns means a shorter wall, so a free-height wall would move everything below it each time you change the count. The window holds one height; the bars show the full column heights. The window is a labelled, focusable region, so the keyboard can scroll it.

Which keys work?

The Columns group is a single-choice toggle group that always keeps one value on: Tab goes to it, the arrow keys move between 2, 3 and 4, and Space or Enter chooses.The Shortest column first switch is a native switch: Tab to it and press Space. With the window focused, the arrow keys, Page Up and Page Down scroll it.

How do I use my own photographs?

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.

How does it fit on a phone?

Two columns, shortest-first, in a window 28 rem tall. The Columns group and the switch are hidden, since a phone has room for only two columns; the readout still updates.

All 100 gallery blocks