Izotop filter, Masonry grid, Packery draggable items

izotop,masonry,packery

// Izotop initialize

	// initialize masonrt grid
   	$(".masonry__grid").isotope({
        itemSelector: '.masonry__item',
        masonry:{
	   		gutter: 30
        }
    });

   	// filtre items in portfolio
    $('.masonry-button').on( 'click', function() {
		  var filterValue = $(this).attr('data-filter');
		  $(".masonry__grid").isotope({ filter: filterValue });
	});

    $(".btn-all").toggleClass('is-checked');
    $('.button-group').each(function(i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function() {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });

    //   Packery initialize (Draggable items)

	$grid.packery({});
    $grid.find('.items-wrapper').each(function(i, gridItem) {
        var draggie = new Draggabilly(gridItem);
        $grid.packery('bindDraggabillyEvents', draggie);
    });

	
	//Scripts

	<script src="js/isotope.pkgd.min.js"></script>
	<script src="js/packery.pkgd.min.js"></script>
	<script src="js/draggabilly.pkgd.min.js"></script>


	<!-- filter buttons -->
    <div class="masonry__buttons button-group">
		<button class="button masonry-button btn-all" data-filter=".all">All</button>
		<button class="button masonry-button" data-filter=".3d">3D</button>
		<button class="button masonry-button is-checked" data-filter=".illustration">illustration</button>
		<button class="button masonry-button" data-filter=".photography">Photography</button>
		<button class="button masonry-button" data-filter=".web">Web</button>
	</div>

	<!-- grid with blocks -->
	<div class="masonry__grid">
		<div class="masonry__item all 3d" style="background-image: url(path/to/img.jpg);"></div>
		<div class="masonry__item all illustration" style="background-image: url(path/to/img.jpg);"></div>
		<div class="masonry__item all web" style="background-image: url(path/to/img.jpg);"></div>
		<div class="masonry__item all photography" style="background-image: url(path/to/img.jpg);"></div>
	</div>