Start waterfall

To run waterfall with default options ☞

That’s it. Every element which has the class waterfall will become a waterfall layout. Methods observing changing DOM are hooked up, you can safely add or remove items right to the container.

Options

Options could be set up as data-attributes, predefined as window.waterfall object or passed right to the constructor ☞

Possible options

colMinWidth: 300px

Minimal column width in pixels that’s used as a basis for calculating number of columns. Only pixel values accepted for now. If value is undefined — it firstly tries to parse css min-width, and if it fails will fall down to default 240px.

defaultContainerWidth: $(window).width()

If container is hidden, it’s preferrable to pass default width to count on.

autoresize: true

Bind reflow on window resize

defaultClass: 'waterfall'

Class of container which to init as waterfall by default

There’re other less important options, look to the source.

αPassing options as data-attributes

translating camel-case to dashed-case:

βPassing options to the constructor

Item position

You can rigidly set position of specific item through it’s data-attributes.

data-column

Specifies what column to place item in. Accepted values: 1..n — points out exact column; 'left', 'right', 'first', 'last' — points out the boundary column.

data-float

Defines floating of item, i. e. boundary column (the same as data-column). Accepted values: 'left', 'right'.

data-span

How much columns the element will take. The same as table-cell span attrubute. Accepted values: number, 'all'.

API

There’s no API. Add or remove items to the container through the DOM (or jQuery), and waterfall will automatically place them.