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

  •        20

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. ⚠️ The latest stable is waterfall-1.0.2 (which is used in the website), newest versions are suffering issues from a major rewrite.




Related Projects

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

vue-waterfall - A waterfall layout component for Vue.js

  •    Vue

A waterfall layout component for Vue.js . Branch 0.x (version 0.x.x) is compatible with Vue 1 .

react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

salvattore - A jQuery Masonry alternative with CSS-driven configuration.

  •    Javascript

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry. To find out more and see it in action, please visit our website.

minigrid - 📏 Minimal 2kb zero dependency cascading grid layout

  •    Javascript

Minigrid is a minimal 2kb zero dependency cascading grid layout. Website & Documentation: http://alves.im/minigrid.

CHTCollectionViewWaterfallLayout - The waterfall (i.e., Pinterest-like) layout for UICollectionView.

  •    Objective-C

CHTCollectionViewWaterfallLayout is a subclass of UICollectionViewLayout, and it trys to imitate UICollectionViewFlowLayout's usage as much as possible. This layout is inspired by Pinterest. It also is compatible with PSTCollectionView.

bricklayer - Lightweight and independent Pinterest-like cascading grid layout library

  •    TypeScript

This plugin works seamlessly with, Safari, Firefox, Chrome and all other modern browsers.

masonry - :love_hotel: Cascading grid layout library

  •    HTML

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. See masonry.desandro.com for complete docs and demos.

angulargrid - Pinterest like responsive masonry grid system for angular

  •    Javascript

agular-grid-id and angular-grid-options deprecated, use ag-id and ag-options instead.

driveway - pure CSS masonry layouts

  •    HTML

driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus. You may have come here from the blog post I wrote about pure CSS masonry layouts. If that's the case and you want the exact code I used in that post(with vendor prefixing), you'll be best served looking in the dist folder for driveway.blog.css and driveway.blog.min.css. Alternatively, use bower to pull in the repo.

neat - A lightweight and flexible Sass grid

  •    CSS

Neat is a fluid grid framework with the aim of being easy enough to use out of the box and flexible enough to customize down the road. Alternatively, you can install Neat with Bower.

avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

  •    CSS

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.

grid-styled - Responsive React grid system built with styled-system

  •    Javascript

The Box component handles width, margin and padding. All grid-styled components use styled-system for style props, which pick up values from a theme and allow for responsive styles to be passed as array values.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.


  •    TypeScript

Visit matrixmultiplication.xyz. This question bothered me a few times until I studied math in the university. There, I had in total four linear algebra courses, so matrix multiplication became my bread-and-butter. One day it just snapped in my mind how the number of rows of the first matrix has to match the number of columns in the second matrix, which means they must perfectly align when the second matrix is rotated by 90°. From there, the second matrix trickles down, "combing" the values in the first matrix. The values are multiplied and added together. In my head, I called this the "waterfall method", and used it to perform my calculations in the university courses. It worked.

Singularity - Grids without limits

  •    CSS

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use. Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.

Simple-Grid - A basic responsive grid for winners

  •    HTML

Simple Grid is a basic lightweight grid, not a CSS framework. There are no styles for buttons, tables, typography etc. etc. Simple Grid comes with two different types of grids. There is a grid for content, which looks like <div class="col-1-3"></div> and a grid for layouts, which looks like <div class="col-4-12"></div>. Simple Grid is also built for responsive layouts. With fluid columns, the grid will resize to adjust to the browser resolution. To accommodate for mobile and tablet devices, the grid will essentially stack all columns, one above another, when viewed on smaller screens. To see the grid in action jump on over to the Simple Grid example page.

Masonry - Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax

  •    Objective-C

Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API. Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.

masonry - Layout elements in a grid, like a mason fitting stones in a wall

  •    Javascript

Layout elements in a grid, like a mason fitting stones in a wall