Privacy Policy
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
$ bower install waterfall.js
Using npm:
$ npm install waterfall
$ 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+ ✔ |