isotopeHTMLandJs #isotope #javascript #jquery

isotope.html

<div id="" class="portfolio-container">
    
    <div class="portfolio-filter clearfix">
        <ul id="portfolioFilters">
            <li><a href="javascript:void(0);" data-filter="*">Show All</a></li>
            <li><a href="javascript:void(0);" data-filter=".web-design">Web Design</a></li>
            <li><a href="javascript:void(0);" data-filter=".web-development">Web Development</a></li>
        </ul>
    </div>
    
    <div class="portfolio-full-grid" id="portfolioGrid">
        
        <ul class="portfolio-wrapper">
        <li class="portfolio_item web-design">
            <div class="portfolio-content-wrap-img">
                <img src="assets/img/port1.jpg">
            </div>
        </li>
        
        <li class="portfolio_item web-development">
            <div class="portfolio-content-wrap-img">
                <img src="assets/img/port1.jpg">
            </div>
        </li>
    </ul>
    </div>
    
</div>

<script src="assets/js/vendor/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/vendor/isotope.pkgd.min"></script>

<script>
  
    var $portFolioGrid = $('#portfolioGrid');
      $portFolioGrid.imagesLoaded( function(){
         $portFolioGrid.isotope({
              itemSelector : '.portfolio_item',
               layoutMode: 'fitRows'
          });
      });
      
      // filter functions

      
   $('#portfolioFilters').on( 'click', 'a', function() {
   var filterValue = $( this ).attr('data-filter');
    $portFolioGrid.isotope({ filter: filterValue });
    });
</script>