/components/jquery-masonry/_posts/docs/2011-05-02-options.mdown

  1---
  2
  3title: Options
  4category: docs
  5layout: default
  6body_class: options
  7toc :
  8  - { title: animationOptions, anchor: animationoptions }
  9  - { title: columnWidth, anchor: columnwidth }
 10  - { title: containerStyle, anchor: containerstyle }
 11  - { title: gutterWidth, anchor: gutterwidth }
 12  - { title: isAnimated, anchor: isanimated }
 13  - { title: isFitWidth, anchor: isfitwidth }
 14  - { title: isResizable, anchor: isresizable }
 15  - { title: isRTL, anchor: isrtl }
 16  - { title: itemSelector, anchor: itemselector }
 17
 18---
 19
 20Options 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`](#itemselector) and [`columnWidth`](#columnwidth) are recommended.
 21
 22{% highlight javascript %}
 23
 24$('#container').masonry({
 25  itemSelector: '.box',
 26  columnWidth: 240,
 27  animationOptions: {
 28    duration: 400
 29  }
 30});
 31
 32{% endhighlight %}
 33
 34<dl class="header clearfix">
 35  <dt><code>option</code></dt>
 36  <dd class="option-type">Type</dd>
 37  <dd class="default">Default</dd>
 38</dl>
 39
 40## animationOptions
 41
 42<dl class="clearfix">
 43  <dt><code>animationOptions</code></dt>
 44  <dd class="option-type">Object</dd>
 45  <dd class="default"><code>{ queue: <span class="kc">false</span>, duration: <span class="mi">500</span> }</code></dd>
 46</dl>
 47
 48Options used for jQuery animation. See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details. More details in [Animating](animating.html).
 49
 50## columnWidth
 51
 52<dl class="clearfix">
 53  <dt><code>columnWidth</code></dt>
 54  <dd class="option-type">Integer</dd>
 55</dl>
 56
 57Width in pixels of 1 column of your grid. If no columnWidth is specified, Masonry uses the width of the first item element.
 58
 59**Recommended** if your layout has item elements that have multiple-column widths.
 60
 61To 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.
 62
 63{% highlight javascript %}
 64
 65$('#container').masonry({
 66  // set columnWidth a fraction of the container width
 67  columnWidth: function( containerWidth ) {
 68    return containerWidth / 5;
 69  }
 70});
 71
 72{% endhighlight %}
 73
 74[See Demo: Fluid](../demos/fluid.html).
 75
 76## containerStyle
 77
 78<dl class="clearfix">
 79  <dt><code>containerStyle</code></dt>
 80  <dd class="option-type">Object</dd>
 81  <dd class="default"><code>{ position: <span class="s1">'relative'</span> }</code></dd>
 82</dl>
 83
 84CSS properties applied to the container. Masonry uses relative/absolute positioning to position item elements.
 85
 86## gutterWidth
 87
 88<dl class="clearfix">
 89  <dt><code>gutterWidth</code></dt>
 90  <dd class="option-type">Integer</dd>
 91  <dd class="default"><code><span class="mi">0</span></code></dd>
 92</dl>
 93
 94Adds additional spacing between columns.
 95
 96[See Demo: Gutters](../demos/gutters.html).
 97
 98## isAnimated
 99
100<dl class="clearfix">
101  <dt><code>isAnimated</code></dt>
102  <dd class="option-type">Boolean</dd>
103  <dd class="default"><code><span class="kc">false</span></code></dd>
104</dl>
105
106Enables jQuery animation on layout changes. [See Docs: Animating](animating.html). More details in [Animating](animating.html).
107
108## isFitWidth
109
110<dl class="clearfix">
111  <dt><code>isFitWidth</code></dt>
112  <dd class="option-type">Boolean</dd>
113  <dd class="default"><code><span class="kc">false</span></code></dd>
114</dl>
115
116If 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.
117
118[See Demo: Centered](../demos/centered.html).
119
120## isResizable
121
122<dl class="clearfix">
123  <dt><code>isResizable</code></dt>
124  <dd class="option-type">Boolean</dd>
125  <dd class="default"><code><span class="kc">true</span></code></dd>
126</dl>
127
128Triggers layout logic when browser window is resized.
129
130## isRTL
131
132<dl class="clearfix">
133  <dt><code>isRTL</code></dt>
134  <dd class="option-type">Boolean</dd>
135  <dd class="default"><code><span class="kc">false</span></code></dd>
136</dl>
137
138Enables right-to-left layout for languages like Hebrew and Arabic.
139
140[See Demo: Right-to-left](../demos/right-to-left.html).
141
142## itemSelector
143
144<dl class="clearfix">
145  <dt><code>itemSelector</code></dt>
146  <dd class="option-type">String</dd>
147</dl>
148
149Filters item elements to selector. If not set, Masonry defaults to using the child elements of the container.
150
151**Recommended** to avoid Masonry using any other hidden elements in its layout logic.
152
153{% highlight javascript %}
154
155$('#container').masonry({ itemSelector: '.box' });
156
157{% endhighlight %}