<p>These events will be triggered at their respective times: <code>'shrink.shuffle'</code>, <code>'shrunk.shuffle'</code>, <code>'filter.shuffle'</code>, <code>'filtered.shuffle'</code>, and <code>'sorted.shuffle'</code>.</p>
sizer: null, // sizer element. Can be anything columnWidth is
gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
buffer: 0, // useful for percentage based heights when they might not always be exactly the same (in pixels)
initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method
throttle: $.throttle || null, // By default, shuffle will try to throttle the resize event. This option will change the method it uses
throttleTime: 300, // How often shuffle can be called on resize (in milliseconds)
sequentialFadeDelay: 150, // Delay between each item that fades in when adding items
supported: Modernizr.csstransforms && Modernizr.csstransitions // supports transitions and transforms
};</code></pre>
<p>The easing function is one of <code>'default'</code>, <code>'linear'</code>, <code>'ease-in'</code>, <code>'ease-out'</code>, <code>'ease-in-out'</code>, or <code>'cubic-bezier'</code>.</p>
<p>No options <em>need</em> to be specified, but <code>itemSelector</code> should be used. Other common options to change are <code>speed</code>, <code>easing</code>, <code>gutterWidth</code>, and <code>columnWidth</code> (or <code>sizer</code>).</p>
<p>You can order the elements based off a function you supply. In the example above, each item has a <code>data-date-created</code> and <code>data-title</code> attribute. The filter buttons have a <code>data-sort</code> attribute with the value of the item’s attribute. Then, with some JavaScript, we can get the correct attribute and provide a function to sort by.</p>
<p>You can order the elements based off a function you supply. In the demo above, each item has a <code>data-date-created</code> and <code>data-title</code> attribute. When the select option menu changes, a sort object is passed to shuffle.</p>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong>can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <codeclass="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<p>The <code>columnWidth</code> option is used to calculate the column width. You have several options:</p>
<ol>
<li>Use a <strong>sizer</strong> element. This is the easest way to specify column and gutter widths. You can use an element or an element wrapped in jQuery. The column and gutter widths will be measured using this element. The <code>sizer</code> option is an alias for <code>columnWidth</code>. See <ahref="{% post_url demos/2013-05-01-basic %}">a demo</a> using a sizer element or <ahref="{{ site.url }}/js/demos/homepage.js">look at js file</a> for the sizer demo</a>.</li>
<li>Use a <strong>function</strong>. When a function is used, its first parameter will be the width of the shuffle element. You need to return the column width for shuffle to use (in pixels).</li>
<li>A <strong>number</strong>. This will explicitly set the column width to your number (in pixels).</li>
<li>By default, shuffle will use jQuery's <codeclass="language-javascript">outerWidth(true)</code> to calculate the column width of the first item and use that value.</li>
This is a large improvement to shuffle. Most notably, the ability for [masonry](http://masonry.desandro.com) layouts. Other additions include adding/removing items, enabling/disabling, multiple instances on a page, and more!
## Todo before launch
* Update index code examples
* Solve margin top issue
* init with a sort
* Consistent naming of public vs private functions
Glen Cheney
11 years ago