JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<script src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>
<ol id="content" class="grid quicksand">
  <li data-id="red" data-group="rgb,hot">Red</li>
  <li data-id="green" data-group="rgb">Green</li>
  <li data-id="blue" data-group="cmyk,cold,fav">Blue</li>
  <li data-id="black" data-group="neutral">Black</li>
  <li data-id="white" data-group="neutral,fav">White</li>
  <li data-id="yellow" data-group="cmyk,hot">Yellow</li>
  <li data-id="cyan" data-group="cmyk,cold">Cyan</li>
  <li data-id="magenta" data-group="cmyk,hot,fav">Magenta</li>    
</ol>

CSS

#quicksand-bags {display: none;}

JavaScript

// prepare data & controls for quicksand
var bags = $('<div id="quicksand-bags" />');
var buttons = $('<div id="quicksand-buttons" />');
var tags = [];

$('.quicksand li').each(function(){
    tags.push.apply( tags, $(this).data('group').split(',') );
});
tags = unique(tags);

$.each(tags, function(i, tag){
    var hasTag = $('[data-group*=' + tag + ']');
    $('<button data-for="' + tag + '">' + tag + '</button>').appendTo(buttons);
    $('<div id="' + tag + '" />').append( hasTag.clone() ).appendTo(bags);
});

$('body').prepend(buttons, bags);


// bind quicksand events
$('#quicksand-buttons button').click(function(){
    $("#content").quicksand($('#' + $(this).data('for') + '> li') );
});


// http://stackoverflow.com/a/10192255/324094
function unique(array){
    return $.grep(array,function(el,index){
        return index == $.inArray(el,array);
    });
}