Sorting

You can order the elements based off a function you supply. In the example above, each item has a data-date-created and data-title attribute. The filter buttons have a data-sort 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.

<li data-sort="title">Title</li>
<div class="item" data-title="Baseball">…</div>
// Sorting options
$('.sort-options button').on('click', function() {
  var $this = $(this),
      sort = $this.data('sort'),
      opts = {};

  // Hide current label, show current label in title
  $('.sort-options .active').removeClass('active');
  $this.addClass('active');

  // We're given the element wrapped in jQuery
  if (sort === 'date-created') {
    opts = {
      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);
});

The opts parameter can contain two properties. reverse, a boolean which will reverse the array. by is a function that is passed the element wrapped in jQuery. In the case above, we’re returning the value of the data-date-created or data-title attributes.

Calling sort with an empty object will reset the elements to DOM order.