Untitled

<!DOCTYPE html>

.....

<script src="./pgod_files/jquery.isotope.min.js"></script>
<script>
    (function($){

        var $container = null;

        $(document).on('ready', function(){

            $container = $('#container');

            $container.isotope({
                masonry: {
                    columnWidth: 300
                },
                filter: '.home, .all'
            });


            // filter items when filter link is clicked
            $('.filters a').on('click', function(event){
                event.preventDefault();
                var selector = $(this).attr('data-filter');
                $container.isotope({filter: selector});

                $('html, body').animate({scrollTop: 0}, 600);
            });
        });

    })(jQuery);


</script>
<style>
    .isotope,
    .isotope .isotope-item {
        /* change duration value to whatever you like */
        -webkit-transition-duration: 0.8s;
           -moz-transition-duration: 0.8s;
            -ms-transition-duration: 0.8s;
             -o-transition-duration: 0.8s;
            transition-duration: 0.8s;
    }

    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform, opacity;
           -moz-transition-property:    -moz-transform, opacity;
            -ms-transition-property:     -ms-transform, opacity;
             -o-transition-property:      -o-transform, opacity;
            transition-property:         transform, opacity;
    }

    /**** disabling Isotope CSS3 transitions ****/

    .isotope.no-transition,
    .isotope.no-transition .isotope-item,
    .isotope .isotope-item.no-transition {
        -webkit-transition-duration: 0s;
           -moz-transition-duration: 0s;
            -ms-transition-duration: 0s;
             -o-transition-duration: 0s;
            transition-duration: 0s;
    }
</style>


</body></html>