One of my clients asked me to implement this layout well-known from pinterest.com 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.

Screenshots

Demo:

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