Author: | raphamorim |
---|---|
Views Total: | 2,405 views |
Official Page: | Go to website |
Last Update: | November 29, 2019 |
License: | MIT |
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);