How to filter a list of items using Isotope and Masonry

I have recently used Isotope to build a filtering app on my website http://www.mustache.co.za to filter portfolio items. I used the filtering library from Isotope which works like a charm.

This is what you need to get started. From here there are a bunch of options on the Isotope website which you can tweak to get what you need.

First, you need to include the Isotope library. You can just download it and include it in your footer:

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

You can also include it from the CDN:

<script src="https://npmcdn.com/[email protected]/dist/isotope.pkgd.min.js"></script>

Then you need to initialize Isotope using jQuery:

// Add the container class where your filter buttons will be
var $grid = $('.grid').isotope({
    itemSelector: '.grid-item', // Each item that you filter will have this class
    percentPosition: true,
    masonry: {
        columnWidth: '.col-md-4'
    }
});

$grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
});

var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
}
};

$('.filters-button-group').on( 'click', 'a', function() {
    var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change active class on buttons
$('.filters-button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'a', function() {
        $buttonGroup.find('.active').removeClass('active');
        $( this ).addClass('active');
    });
});
<div class="filters-button-group">
	<a href="" data-filter="*">All</a>
	<a href="" data-filter=".business-card">Business Cards</a>
	<a href="" data-filter=".website">Website</a>
	<a href="" data-filter=".logo">Logo</a>
</div>
<div class="grid">
	<div class="grid-item website">Website</div>
	<div class="grid-item logo">Logo</div>
	<div class="grid-item website logo">Website, Logo</div>
	<div class="grid-item business-card logo">Business Card, Logo</div>
	<div class="grid-item logo">Logo</div>
	<div class="grid-item business-card logo website">Business Card, Logo, Website</div>
	<div class="grid-item business-card">Business Card</div>
	<div class="grid-item logo website">Logo, Website</div>
</div>

This article was written by Francois View Profile
Hi. I'm currently 31 years old and I'm a full time Front-End Web Developer. I love cats and I love life.... sometimes. I created this blog when I was figuring out how Wordpress works and it eventually started to get a whole lot of traffic. I'm now trying to help fellow South Africans with general how to stuff for example how to renew your car license disc and also reviews like restaurants etc. I haven't done much yet but I will soon start to do more and more. I will try to write as many blog posts as I can. I hope you enjoy this blog and don't forget to leave a comment. Oh and you're welcome to write a guest post or review. Just click on Write Guest Post on the top main menu.
Twitter | Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × two =