One of my clients asked me to implement this layout well-known from pinterest.com so I made a separate demo page.
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.