JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<script src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>
<div class="demo">
        
          <form id="filter">
                <fieldset>
                    <legend>Filter by type</legend>
                    <label><input type="radio" name="type" value="all" checked="checked">Everything</label>
                    <label><input type="radio" name="type" value="app">Applications</label>
                    <label><input type="radio" name="type" value="util">Utilities</label>
                </fieldset>
                <fieldset>
                    <legend>Sort by</legend>
                    <label><input type="radio" name="sort" value="size" checked="checked">Size</label>
                    <label><input type="radio" name="sort" value="name">Name</label>            
                </fieldset>
            </form>
        
          <ul id="applications" class="image-grid" style="height: 591px; "><li data-id="id-11" data-type="util">
              <img src="../content/images/network-utility.png" width="128" height="128" alt="">
              <strong>Network Utility</strong> 
              <span data-type="size">245 KB</span>
            </li><li data-id="id-1" data-type="util">
              <img src="../content/images/activity-monitor.png" width="128" height="128" alt="">
              <strong>Activity Monitor</strong>
              <span data-type="size">348 KB</span>
            </li><li data-id="id-4" data-type="app">
              <img src="../content/images/front-row.png" width="128" height="128" alt="">
              <strong>Front Row</strong> 
              <span data-type="size">401 KB</span>
            </li><li data-id="id-10" data-type="util">
              <img src="../content/images/keychain-access.png" width="128" height="128" alt="">
              <strong>Keychain Access</strong> 
              <span data-type="size">972 KB</span>
            </li><li data-id="id-3" data-type="app">
              <img...

JavaScript

// Custom sorting plugin
(function($) {
  $.fn.sorted = function(customOptions) {
    var options = {
      reversed: false,
      by: function(a) { return a.text(); }
    };
    $.extend(options, customOptions);
    $data = $(this);
    arr = $data.get();
    arr.sort(function(a, b) {
      var valA = options.by($(a));
      var valB = options.by($(b));
      if (options.reversed) {
        return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;                
      } else {        
        return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;    
      }
    });
    return $(arr);
  };
})(jQuery);

// DOMContentLoaded
$(function() {

  // bind radiobuttons in the form
  var $filterType = $('#filter input[name="type"]');
  var $filterSort = $('#filter input[name="sort"]');

  // get the first collection
  var $applications = $('#applications');

  // clone applications to get a second collection
  var $data = $applications.clone();

  // attempt to call Quicksand on every form change
  $filterType.add($filterSort).change(function(e) {
    if ($($filterType+':checked').val() == 'all') {
      var $filteredData = $data.find('li');
    } else {
      var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']');
    }

    // if sorted by size
    if ($('#filter input[name="sort"]:checked').val() == "size") {
      var $sortedData = $filteredData.sorted({
        by: function(v) {
          return parseFloat($(v).find('span[data-type=size]').text());
        }
      });
    } else {
      // if sorted by name
      var $sortedData = $filteredData.sorted({
        by: function(v) {
          return $(v).find('strong').text().toLowerCase();
        }
      });
    }   

    // finally, call quicksand
    $applications.quicksand($sortedData, {
      duration: 800
    });

  });

});