Waterfall.JS – A Pinterest Grid in Just 1KB

The Waterfall.JS Script is one of the best alternatives for the most-known “Masonry” script, often used on tumblr pages. It has a deep browser support, down to IE 8 and Safari 8, is usable as AMD / UMD / nodeJS Module and is just 1 KB in size without ANY dependencies!

The script isn’t maintained anymore, and the last update is over 2 years ago, but it still works for the most usecases. If you need something special, you can set up your own Masonry script using Waterfall.JS as fork / basis for your own work, due to the MIT license!

Download the latest version of WaterfallJS as .ZIP or as .TAR package!

npm i waterfall.js --save

yarn add waterfall.js --save

bower install waterfall --save

Instructions

The script itself just comes up with a single JavaScript file, which is available as minified and “normal” edition. Since it isn’t based on CSS, so you don’t need any specific styles for this.

 

Load Waterfall.JS

The single JavaScript file for the WaterfallJS script can be located wherever you want, but we recommend to load it immediately after the started <body> tag.

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/waterfall.min.js"></script>
    </body>
</html>

 

Configure Waterfall.JS

The script itself does’t offer any settings or deep configurations, it just allows a selector or the respective container element passed as argument. But to make your Mansory Grid a bit more responsive, you can also hook the “waterfall()” method to the window “resize” event, as shown below.

document.addEventListener("DOMContentLoaded", {
    waterfall(".my-grid");
    
    // Responsive Mode
    window.addEventListener("resize", function(){
        waterfall(".my-grid");
    });
});

 

Leave a Reply

Top