Continuing Education

No Title

Options · jQuery Masonry

jQuery Masonry

Docs

Demos

Options

Options are set with an object as second argument to the .masonry() method. All options are optional, and do not need to be set, but itemSelector and columnWidth are recommended.

$('#container').masonry({
itemSelector: '.box',
columnWidth: 240,
animationOptions: {
duration: 400
}
});
option
Type
Default

animationOptions

animationOptions
Object
{ queue: false, duration: 500 }

Options used for jQuery animation. See the jQuery API for animate options for details. More details in Animating.

columnWidth

columnWidth
Integer

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.

$('#container').masonry({
// set columnWidth a fraction of the container width
columnWidth: function( containerWidth ) {
return containerWidth / 5;
}
});

See Demo: Fluid.

containerStyle

columnWidth
Object
{ position: 'relative' }

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

gutterWidth

gutterWidth
Integer
0

Adds additional spacing between columns.

See Demo: Gutters.

isAnimated

isAnimated
Boolean
false

Enables jQuery animation on layout changes. See Docs: Animating. More details in Animating.

isFitWidth

isFitWidth
Boolean
false

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.

See Demo: Centered.

isResizable

isResizable
Boolean
true

Triggers layout logic when browser window is resized.

isRTL

isRTL
Boolean
false

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

See Demo: Right-to-left.

itemSelector

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.

$('#container').masonry({ itemSelector: '.box' });

jQuery Masonry by David DeSandro