Filter & Shuffle A Grid Of Items with jQuery and CSS3

A filterable grid that allows you to categorize, filter and shuffle a grid of items with CSS3 transform & transition based effects.

See also:

• jQuery Plugin For Interactive and Filterable Portfolio
• jQuery Plugin For Sortable and Filterable Grid of Items - Shuffle

How to use it:

1. Create a grid of items and categorize them using CSS classes e.g. type-1, type-2, ...

<div class="grid">
  <a href="#" class="type-1"><img src="1.png"></a>
  <a href="#" class="type-2 type-3 type-4 type-5"><img src="2.png"></a>
  <a href="#" class="type-2 type-6"><img src="3.png"></a>
  <a href="#" class="type-3 type-2"><img src="4.png"></a>
  <a href="#" class="type-4"><img src="5.png"></a>
  <a href="#" class="type-1"><img src="6.png"></a>
  <a href="#" class="type-5 type-2"><img src="7.png"></a>
  <a href="#" class="type-6"><img src="8.png"></a>
  <a href="#" class="type-4 type-2 type-1"><img src="9.png"></a>
  <a href="#" class="type-5 type-1"><img src="10.png"></a>
  <a href="#" class="type-6 type-4"><img src="11.png"></a>
  <a href="#" class="type-5 type-3 type-4"><img src="12.png"></a>
</div>

2. Create links with data-filter attributes to filter the items based on CSS classes.

<ul class="filter">
  <li><a href="#" class="on">All</a></li>
  <li><a href="#" data-filter=".type-1">Type One</a></li>
  <li><a href="#" data-filter=".type-2">Type Two</a></li>
  <li><a href="#" data-filter=".type-3">Type Three</a></li>
  <li><a href="#" data-filter=".type-4">Type Four</a></li>
  <li><a href="#" data-filter=".type-5">Type Five</a></li>
  <li><a href="#" data-filter=".type-6">Type Six</a></li>
</ul>

3. Include the necessary jQuery library at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

4. The sample CSS styles to custom the transition & transform effects.

.grid a {
  display: inline-block;
  font-size: 0;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.grid .hidden {
  opacity: 0;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

5. Enable the filterable grid view.

$(".filter a").click(function(e){
var $this = $(this),
data = $this.data("filter");

$(".filter").find(".on").removeClass("on");
$this.addClass("on");
$(".grid").find(".hidden").removeClass("hidden");
if(data){
$(".grid a").not(data).addClass("hidden");
};

e.preventDefault();
});
});

---

This awesome jQuery plugin is developed by peternguyen. For more Advanced Usages, please check the demo page or visit the official website.