How to add Isotope Fx to blog page

STEP 1: Add isotope fx script file
Associate isotope.min.js file in your theme's functions.php file:

wp_enqueue_script( 'isotope', get_template_directory_uri() . '/assets/js/isotope.pkgd.min.js', array('jquery') );

STEP 2: Initialize isotope script
Add the following script to your theme's js file (read comments to understand each function):

/******************* ISOTOPE *******************/

// init Isotope and assign params to grid variable
var $grid = $('#ajax-fetch').isotope({
  itemSelector: '.iso',
  layoutMode: 'fitRows'
});

// bind filter button click (blog page)
// also, update the url in the browser
$('.blog .fusion-menu').on( 'click', 'a', function(e) {
    var nurl = $(this).attr('href');
    window.history.pushState({path: nurl}, '', nurl);
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterValue;
    $grid.isotope({ filter: filterValue });
    if(!!$.prototype.isotope){
        e.preventDefault();
    }
});

// modify classes/styles after isotope effect is completed
$grid.on( 'layoutComplete', function() {
    $("#ajax-fetch .iso").removeClass('featured');
    $("#ajax-fetch .iso").removeClass('second-block');
    $("#ajax-fetch .iso").removeClass('second-block1');
    $("#ajax-fetch .iso").removeClass('second-block');
    $("#ajax-fetch .iso").removeClass('second-block2');
    $("#ajax-fetch .iso").removeClass('third-block');
    $("#ajax-fetch .iso").removeClass('third-block1');
    $("#ajax-fetch .iso").removeClass('third-block2');
    $("#ajax-fetch .iso").removeClass('fourth-block');
        $("#ajax-fetch .iso:visible").eq(0).addClass('featured');
        $("#ajax-fetch .iso:visible").eq(1).addClass('second-block second-block1');
        $("#ajax-fetch .iso:visible").eq(2).addClass('second-block second-block2');
        $("#ajax-fetch .iso:visible").eq(3).addClass('third-block third-block1');
        $("#ajax-fetch .iso:visible").eq(4).addClass('third-block third-block2');
        $("#ajax-fetch .iso:visible:gt(4)").addClass('fourth-block');
        $("#ajax-fetch .iso").css('opacity','1');
        $('#ajax-fetch').css('height','auto');
});

// click event is triggered on category blog pages
// unfortunately isotope event didn't trigger so I had to go with this workaround
$(window).load(function() {
if ($('.tax-blog').length) {
    var catValue = $('#blog-wrapper').attr('title');
    $('.fusion-menu .'+catValue).trigger('click');
}
});

/******************* ISOTOPE END *******************/

That's it!