Blog Lab

Waterfall/Mosaic Layout Demo

One of my clients asked me to implement this layout well-known from so I made a separate demo page.

The layout is dynamically done by Javascript and is easy to apply. Though there are a few requirements to the DOM structure, as presented below:

The code looks for any container with the class ‘waterfall‘, then looks for containers with the class ‘waterfall-list‘ and processes the layout to its children with the class ‘waterfall-item‘. There could be multiple lists in one ‘waterfall‘ container, they share the same column-width setting on the ‘waterfall‘ container.

Important: the size of the containers with the class ‘waterfall-item-wrapper‘ determines the positioning. So it’s better if they have a pre-determined size.



See the Pen Waterfall Layout Demo by Xingchen Hong (@Zodiase) on CodePen.0

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.