Made by @raphamorim

Waterfall.js

Pinterest Grid in Just 1KB

Status: Stable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo
42+ ✔ 40+ ✔ 8+ ✔ 29+ ✔ 8+ ✔