Balanced Waterfall Gallery Block for React

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.

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.

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.

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.

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.