Waterfall

Using a simple CSS floating system, Waterfall moves elements from one column of the grid to another, whenever the screen size can't fit all elements horizontally.

This approach gives an impression of a liquid layout, while also maximizing the usage of whitespace on a page.

Unlike classically left-floated elements, Waterfall fixes the gaps that might appear between elements, fitting each tile in the perfect position underneath the one above.

This layout was made famous by plugins like Masonry and is currently widely used across the Web thanks to sites like Pinterest.

Multiple demos are included with the Waterfall download package.

Requirements:

• JavaScript enabled on client side
• jQuery 1.6.1 or higher
• Handlebars