API Docs for:
Show:

Masonry Class

Extends Base
Defined in: gallery-masonry.js:4

A class for constructing Masonry instances.

Constructor

Masonry

()

Methods

appended

(
  • content
  • callback
  • [isAnimatedFromBottom=false]
)
chainable

Triggers layout on item elements that have been appended to the container.

Parameters:

  • content NodeList

    The appened items

  • callback Function

    A callback function

  • [isAnimatedFromBottom=false] Boolean optional

layout

(
  • bricks
  • callback
)
chainable

Positions specified item elements in layout.

Parameters:

  • bricks NodeList

    The appened items

  • callback Function

    A callback function

reload

(
  • callback
)
chainable

Convenience method for triggering reloadItems then reLayout. Useful for prepending or inserting items.

Parameters:

  • callback Function

    A callback function

reloadItems

() chainable

Re-collects all item elements in their current order in the DOM.

remove

(
  • content
)
chainable

Removes specified item elements from Masonry instance and the DOM.

Parameters:

  • content NodeList

    Nodes to be removed

Attributes

animationOptions

Object

Options used for YUI transition.

Default: { duration: 0.5 }

columnWidth

Num

Width in pixels of 1 column of your grid. If no columnWidth is specified, Masonry uses the width of the first item element.

Recommended if your layout has item elements that have multiple-column widths.

To set a dynamic column width, you can pass in a function that returns the value column width. The function provides an argument for the width of the container. Use this technique for fluid or responsive layouts.

containerStyle

Object

CSS properties applied to the container. Masonry uses relative/absolute positioning to position item elements.

Default: { position: 'relative' }

gutterWidth

NUM

Adds additional spacing between columns.

Default: 0

isAnimated

Boolean

Enables YUI transition on layout changes.

Default: false

isFitWidth

Boolean

If enabled, Masonry will size the width of the container to the nearest column. When enabled, Masonry will measure the width of the container´╝Ős parent element, not the width of the container. This option is ideal for centering Masonry layouts.

Default: false

isResizable

Boolean

Triggers layout logic when browser window is resized.

Default: true

isRTL

Boolean

Enables right-to-left layout for languages like Hebrew and Arabic.

Default: false

itemSelector

String

Filters item elements to selector. If not set, Masonry defaults to using the child elements of the container. Recommended to avoid Masonry using any other hidden elements in its layout logic.

node

Node

The container node