Filtering Grids with Isotope.js



peaceful isolation
listening to isochronic beats
writing about isotope jQuery
iso love this

Dave DeSandro, over at Metafizzy, developed a super smooth isotope jQuery plugin which, I think, should exist in every designer’s playground. It filters, it sorts, it’s animated, and its masonry layout works beautifully with responsive grids. Take a sec to check out the site, jquery.isotope.js – tinker with the top controls, resize your window, notice how gracefully the info is displayed and shuffled around – and then come back. 🙂

I decided to experiment with the basic filtering function, and, of course, any time I experiment with any script, it has to relate to music. So, here’s a little album cover gallery, filterable by genre.


the <head>

First you want to grab the latest isotope.js from github and link to it in the head, like so…

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>

the HTML

Here’s a stripped down version so you can see the basic elements…

[code language=”html”]
<div class="albumFilter">
Select a genre:
<a href="#" data-filter="*" class="current">All Genres</a>
<a href="#" data-filter=".soul">Soul</a>
<a href="#" data-filter=".funk">Funk</a>

<div class="albumContainer">
<!– thing one –>
<div class="block soul">
<img src="images/al_green.jpg">
<div class="block-info">
<h4>Al Green</h4>
<p>Still In Love With You</p>
<!– thing two –>
<div class="block funk">
<img src="images/funkadelics.jpg">
<div class="block-info">

the CSS

Be sure to grab the isotope section at the end.
Remember, you can download this demo as a zip.

[code language=”css” collapse=”true”]
@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot?’) format(‘eot’),
url(‘GraublauWeb.woff’) format(‘woff’),
url(‘GraublauWeb.ttf’) format(‘truetype’);
body {
font-family: ‘Graublau Web’, ‘Droid Sans’, Arial, sans-serif;
font-size: 12px;
background-color: #eaeaea;
img {
width: 100%;

/* filter pill buttons */
.albumFilter a {
margin: 3px;
font-size: 11px;
padding: 2px 8px;
background-color: #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration: none;
text-transform: uppercase;
.albumFilter {margin-bottom: 20px;}
.albumFilter a:hover {background-color: #666;}
.albumFilter a.current {background-color: #333;}

/* tile style */
div.block {
border: 1px solid #ccc;
background-color: #fff;
margin: 10px 10px 0px 0px;
padding: 5px;
-webkit-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 2px rgba(50, 50, 50, 0.35);

/* tile hover descriptions */
.block-info {
padding: 5px;
height: 30%;
filter: alpha(opacity = 0);
.block-info h4 {
padding: 0;
margin: 0px;
.block-info p {
color: #999;
padding: 0;
margin: 0px;
.block:hover .block-info{
margin-top: 0px;
filter: alpha(opacity = 90);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;

/* isotope transition styles */
.isotope-item {
z-index: 2;
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;

the jQuery

Now, let’s get some isotope action in there!

[code language=”javascript”]
<script type="text/javascript">
var $container = $(‘.albumContainer’);
filter: ‘*’,
animationOptions: {
duration: 750,
easing: ‘linear’,
queue: false

$(‘.albumFilter a’).click(function(){
$(‘.albumFilter .current’).removeClass(‘current’);

var selector = $(this).attr(‘data-filter’);
filter: selector,
animationOptions: {
duration: 750,
easing: ‘linear’,
queue: false
return false;

The first chunk initiates isotope and sets the resizeable landscape for the container.

The second chunk handles the onclick function for filtering.

the Result

Now we have a slick, responsive, filterable album cover gallery!

jQuery Isotope album gallery demo - keep it funky!

jQuery Isotope album gallery demo – keep it funky!


This just scratches the surface of what isotope can do, but hopefully it’s enough to spark some creative ideas. Their site has a great list of demos showcasing all the built in goodies and nicely mapped out documentation.

I think with a little clever manipulation, this could be used as top navigation for a responsive, quirky art site, complete with animated page transitions.

Hmmm… I might have to try that next. 🙂

Daisey Traynham

Daisey Traynham

Creative Director at Art+Logic
Daisey Traynham has been designing user interfaces for Art+Logic since 2001. She's a digital nomad who also tours the world as a soul/funk singer. Current location: either somewhere in SE Asia, floating around Europe or living in a camper van in the Northwest United States.
Daisey Traynham

Latest posts by Daisey Traynham (see all)


Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.


  1. Grid Filter

    Very explicit and practical, I am thrilled to read all. Thanks for sharing.

    • Enrique

      I found this which uses Isotope v2 and implement all complicated filtering, searching and sorting features and it is very easy to implement.

  2. A.Kong

    Will this work on a blogger template as well? I’m intending to sort my blogger posts by labels / categories. If this works, how can I install on my own blogger?