Columnist – Simple and lightweight multi-column design

Columnist achieves a nice, masonry-like, multi-column design without using absolute positioning.
It doesn't move items to different columns, doesn't do any fancy maths,
all it does it fixing the empty space below shorter columns – simple and lightweight!

- Demo
- How it works?
- Source code
- NPM

Installation

You can either install Columnist as a node module:

$ npm i --save avris-columnist

or

$ yarn add avris-columnist

Use a CDN:

Usage

$3

Class names are irrelevant. It's important that a column has only one child element!

$3

import Columnist from 'avris-columnist';

const columnist = new Columnist(document.querySelector('.columnist-wall'));

columnist.layout(); // apply layout

columnist.start(100); // run every 100 ms -- temporary solution, will be removed

columnist.destroy(); // destroy and clean up

$3

You can add an animation like this:

Copyright