Super Tiny Pinterest-style Grid Library – waterfall.js

Preview:

Description:

Just another pure JavaScript library that creates a responsive, fluid, Pinterest inspired grid to showcase your products, services, designs, etc. Also known as Masonry Layout.

Dead simple to use and just weights in 1kb (minified).

How to use it:

1. Install and import the waterfall.js library.

# Yarn
$ yarn add waterfall.js
# NPM
$ npm install waterfall.js --save

import waterfall from './src/waterfall'

2. Or include the minified version of the waterfall.js library on the web page.

<script src="waterfall.min.js"></script>

3. Add as many items to the grid.

<div class="waterfall">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

4. Initialize the grid and done.

waterfall('.waterfall');
// OR
var grid = document.querySelector('waterfall');
waterfall(grid);