The "Why"

Currently the best option today to do this job is Masonry, but it's very heavy and have dependency of jQuery. Please understand: this isn't a problem is most cases, but in cases when perfomance and page weight matters, the best case is try other options: maybe pure CSS? It's possible?

This question have a good point. Yes, exists CSS ways to solve, using flexbox or columns technic, but doesn't work well when you don't know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where no matter the structure: Waterfall will work.

However; Waterfall always will consider items with same width :)

How to get this?

Using bower:

$ bower install waterfall.js

Using npm:

$ npm install waterfall

Or Download Waterfall.js

How to use?

Define your grid structure:

<div class="my-grid">
    <div class="item">Solid Snake</div>
    <div class="item">Riou</div>
    <div class="item">Jack Russel</div>
    <div class="item">Red</div>
    <div class="item">Sonic</div>
    <div class="item">Megaman</div>
</div>

Call Waterfall function with your grid as a argument and let the magic happens :)

waterfall('.my-grid');
// OR
var grid = document.querySelector('my-grid');
waterfall(grid);

Browser Support

42+ ✔	40+ ✔	8+ ✔	29+ ✔	8+ ✔