columns.js – A minimalistic Masonry Layout Script

columns.js

columns.js is another special, minimalistic Masonry layout written in Vanilla JavaScript, without any dependencies. It is only available for cool, modern browsers who supports ECMAScript (ES) 6 Modules as well as CSS Flexible Boxes. The last one is required, because the script itself doesn’t use inline styles, absolute positioning or transform methods! Everything gets controlled by CSS, while the script just (re-) splits your items into the configured number of columns.

The JavaScript Code allows also a responsive configuration, which adapts the number of columns according to the screen size. It tries also to remain the chronological order. columns.js may should work in 11+, however, we did not test that yet. The script is also pretty new, the first commit was on 31. August 2018 and the current version is still 1.0.0!

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

Instructions

The package itself just contains the main JavaScript file, in a normal unminified version. I really tried to find columns.js on NPM, because the GitHub Repository also shows a package.json file, but unfortunately in vain. The NPM page isn’t listed on mladenilics Profile Page either!

 

Load columns.js

The Script itself doesn’t inject any inline styles and the package also doesn’t contain any Stylesheet. So the Styling / Controlling about the columns is completely up to you! But the README.md file shows at least how it can work, by using the CSS Flexible Box Layout Module. So just include the styles below within your HTML <head> element. It’s recommended to embed the JavaScript file after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Styles -->
        <style type="text/css">
            #web-scripts-wrapper{
                display: flex;
                flex-wrap: wrap;
            }
            [data-columns="2"] > div {
                flex-basis: calc(100% / 2);
            }
            [data-columns="3"] > div {
                flex-basis: calc(100% / 3);
            }
            [data-columns="4"] > div {
                flex-basis: calc(100% / 4);
            }
        </style>
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/columns.js"></script>

        <!-- Required HTML Structure -->
        <div id="web-scripts-wrapper">
            <div class="post-item"><!-- ... --></div>
            <div class="post-item"><!-- ... --></div>
            <div class="post-item"><!-- ... --></div>
        </div>
    </body>
</html>

 

Configure columns.js

The first version of this script just offers the following 3 settings:

document.addEventListener("DOMContentLoaded", {
    var cols = new Columns(document.getElementById("web-scripts-wrapper"), {
        columns:        2,
        breakpoints:    {},
        column_class:   "column-js"
    });
});

 

Configure: Options

columns
The default number of used columns.
breakpoints
An additional object, which sets the number of used columns, depending on the width of the users screen (eg. {460: 2, 820: 3}).
column_class
The respective class name, wchih should be used for the single DIV containers.

Leave a Reply

Top