$(document).ready(function(){
    var $grid = $('.grid').isotope({
        itemSelector: '.grid-item',
        percentPosition: true,

        masonry: {
            // use outer width of grid-sizer for columnWidth
            columnWidth: '.grid-sizer',
            gutter: 10
        }
    });

    $('.filter-button-group').on( 'click', '.btn-filter', function() {
        var $btn = $(this);
        $('.filter-button-group .btn-filter').each(function(i){
            $(this).removeClass('active');
        });
        $btn.addClass('active');
        var filterValue = $btn.data('filter');
        $grid.isotope({ filter: filterValue });
    });

});