https://github.com/raphamorim/waterfall.js

Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?
https://github.com/raphamorim/waterfall.js

cascading css grid layout pinterest waterfall

Last synced: 14 days ago
JSON representation

Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?

• Host: GitHub
• URL: https://github.com/raphamorim/waterfall.js
• Owner: raphamorim
• Created: 2015-11-12T13:39:03.000Z (about 9 years ago)
• Default Branch: main
• Last Pushed: 2022-08-12T10:54:35.000Z (over 2 years ago)
• Last Synced: 2024-10-23T17:19:01.082Z (21 days ago)
• Topics: cascading, css, grid, layout, pinterest, waterfall
• Language: JavaScript
• Homepage: http://raphamorim.io/waterfall.js/
• Size: 117 KB
• Stars: 540
• Watchers: 21
• Forks: 70
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/raphamorim/waterfall.js.svg?branch=master)](https://travis-ci.org/raphamorim/waterfall.js)

[![NPM Version](https://img.shields.io/npm/v/express.svg?style=flat)](https://www.npmjs.com/package/waterfall.js)

[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

# Waterfall.js

> Tired of using creepy hacks or heavy ways to get a grid based on Pinterest?

1KB and works without any dependency, also [UMD support available too](https://github.com/umdjs/umd) \o/

## The "Why"

Currently the best option today to do this job is Masonry, but it's very heavy and has a jQuery dependency. Please understand: this isn't a problem in most cases, but when perfomance and page weight matters, it's best to try other options: maybe pure CSS? Is it possible?

This question has a good point. Yes, there are CSS ways to solve this, using flexbox or columns technic, but this doesn't work well when you don't know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where the structure doesn't matter: Waterfall will work.

However; Waterfall always will consider items with **same width** :)

## How to Use?

#### Getting

First at all, get Waterfall using [Download Option](https://github.com/raphamorim/waterfall.js/archive/master.zip)

Get it using npm or yarn by running this command

```sh

npm install [email protected]

```

or

```sh

yarn add [email protected]

```

:warning: The latest stable is waterfall-1.0.2 (which is used in the website), newest versions are suffering issues from a major rewrite.

You can import

```js

import waterfall from 'waterfall.js/src/waterfall'

```

Or add the source before the closing body tag:

```html