Shuffle - Categorize, sort, and filter a grid of items

Shuffle is a jQuery plugin for sorting, filtering, and laying out a group of items. It’s performant, responsive, and fast.

Features

• Fast - Only one forced synchronous layout (aka reflow) on init, sort, or shuffle.
• Uses CSS Transitions!
• Responsive (try resizing the window!)
• Filter items by groups
• Items can have multiple groups and be different sizes
• Sort items
• Advanced filtering (like searching)

Source: vestride.github.io

1. INCLUDE JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Shuffle! -->
<script src="/Shuffle/dist/jquery.shuffle.js"></script>

2. HTML

<div id="grid" class="row-fluid">
  <figure class="span3 picture-item" data-groups='["photography"]'>
    <img src="/img/baseball.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">Baseball</figcaption>
      <p class="picture-item__tags">photography</p>
    </div>
  </figure>
  <figure class="span6 picture-item" data-groups='["wallpaper","3d"]'>
    <img src="/img/tennis-ball.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">Tennis</figcaption>
      <p class="picture-item__tags">wallpaper, 3d</p>
    </div>
    <p class="picture-item__description">Some description here.</p>
  </figure>
  <figure class="span3 picture-item" data-groups='["wallpaper","3d"]'>
    <img src="/img/imac.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">iMac</figcaption>
      <p class="picture-item__tags">wallpaper, 3d</p>
    </div>
  </figure>
  <figure class="span3 picture-item picture-item--h2" data-groups='["graphics"]'>
    <img src="/img/master-chief.png" height="145" width="230" />
    <div class="picture-item__details">
      <figcaption class="picture-item__title">Master Chief</figcaption>
      <p class="picture-item__tags">graphics</p>
    </div>
    <p class="picture-item__description">Some description here.</p>
  </figure>
</div>

3. JAVASCRIPT

$(document).ready(function() {
  var $grid = $('#grid'),
      $sizer = $grid.find('.shuffle__sizer');

  $grid.shuffle({
    itemSelector: '.picture-item',
    sizer: $sizer
  });
});

4. OPTIONS

// Overrideable options
Shuffle.options = {
    group: 'all', // Filter group
    speed: 250, // Transition/animation speed (milliseconds)
    easing: 'ease-out', // css easing function to use
    itemSelector: '', // e.g. '.picture-item'
    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
};

5. EVENTS

A list of events shuffle triggers:

• 'loading.shuffle'
• 'done.shuffle'
• 'shrink.shuffle'
• 'shrunk.shuffle'
• 'filter.shuffle'
• 'filtered.shuffle'
• 'layout.shuffle'
• 'removed.shuffle'

Heads up! To receive the loading event, you must subscribe to it before initializing the plugin, otherwise it will fire before you have subscribed to it.

Get notified when shuffle is done with setup

$grid.on('done.shuffle', function() {
  console.log('Finished initializing shuffle!');
});

// Initialize shuffle
$grid.shuffle( options );

Do something when an item is removed

$grid.on('removed.shuffle', function( evt, $collection, shuffle ) {
  console.log( this, evt, $collection, shuffle );
});

<select class="sort-options">
  <option value="">Default</option>
  <option value="title">Title</option>
  <option value="date-created">Date Created</option>
</select>

<figure class="picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">…</figure>

// Sorting options
$('.sort-options').on('change', function() {
  var sort = this.value,
      opts = {};

  // We're given the element wrapped in jQuery
  if ( sort === 'date-created' ) {
    opts = {
      reverse: true,
      by: function($el) {
        return $el.data('date-created');
      }
    };
  } else if ( sort === 'title' ) {
    opts = {
      by: function($el) {
        return $el.data('title').toLowerCase();
      }
    };
  }

  // Filter elements
  $grid.shuffle('sort', opts);
});

// Filters elements with a data-title attribute with less than 10 characters
$('#grid').shuffle('shuffle', function($el, shuffle) {
  return $el.data('title').length < 10;
});

// Advanced filtering
$('.js-shuffle-search').on('keyup change', function() {
  var val = this.value.toLowerCase();
  $grid.shuffle('shuffle', function($el, shuffle) {

    // Only search elements in the current group
    if (shuffle.group !== 'all' && $.inArray(shuffle.group, $el.data('groups')) === -1) {
      return false;
    }

    var text = $.trim( $el.find('.picture-item__title').text() ).toLowerCase();
    return text.indexOf(val) !== -1;
  });
});

// Adds 2 <div>s to an existing Shuffle instance.
var $item1 = $('<div class="gallery-item item1">')
var $item2 = $('<div class="gallery-item item2">')
var $items = $item1.add($item2);
$('#my-shuffle').append($items);
$('#my-shuffle').shuffle('appended', $items);

// Remove the 2 <div>s which were just added.
var $items = $('.gallery-item');
$('#my-shuffle').shuffle('remove', $items);