Masonry โ reflow during image loads
Two grids, same photos, separate Run buttons so you feel each one. The left uses stock <img> tags with no reserved dimensions โ the column stretches as each image decodes and every tile below it shifts. The right calls prepare() per image first, then commits the layout from @somnai-dreams/layout-algebra in one synchronous pass; tiles are positioned before any pixel paints. Toggle between shortest-column masonry (packShortestColumn) and Flickr-style justified rows (packJustifiedRows).
Images
24
Layout
Naive <img>
First space reserved—
Average dim fetch—
All space reserved—
Preimage prepare + measured masonry
First space reserved—
Average dim fetch—
All space reserved—