jQuery isotope filter

isotope-active.js

jQuery(document).ready(function($){
    $(".all-portfolios").isotope({
        itemSelector: '.single-portfolio',
        layoutMode: 'fitRows',
    });
    
    $('ul.filter li').click(function(){ 
        
      $("ul.filter li").removeClass("active");
      $(this).addClass("active");        

        var selector = $(this).attr('data-filter'); 
        $(".all-portfolios").isotope({ 
            filter: selector, 
            animationOptions: { 
                duration: 750, 
                easing: 'linear', 
                queue: false, 
            } 
        }); 
      return false; 
    }); 
    
});

jquery-isotope-markup.html

<div class="portfolio-filter text-uppercase text-center">
    <ul class="filter">
        <li class="active" data-filter="*">All</li>
        <li data-filter=".web-design">Web Design</li>
        <li data-filter=".graphic">Graphic</li>
        <li data-filter=".photography">Photography</li>
        <li data-filter=".motion-video">Motion video</li>
    </ul>
</div>

<div class="all-portfolios">
    <div class="single-portfolio web-design">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio graphic">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio photography motion-video">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio web-design">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio graphic web-design">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio web-design">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio graphic">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio motion-video">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio motion-video">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio graphic photography">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio motion-video">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
    <div class="single-portfolio photography">
        <img class="img-responsive" src="http://placehold.it/285x220" alt="">
    </div>
</div>

jquery-isotope.css

.portfolio-filter {}
ul.filter {color: #2e2e2e}
ul.filter li{display: inline-block;font-size: 16px;font-weight: 400;padding-right: 25px;padding-left: 25px;position: relative;cursor: pointer}
ul.filter li.active{color: #549DC5}
ul.filter li:after{content: "/";position: absolute;right: 0;top: 0;color: #B4B4B4}
ul.filter li:last-child{}
ul.filter li:last-child:after{display: none}
.all-portfolios {margin-top: 20px;margin-left: -10px}
.single-portfolio {float: left;
margin-bottom: 10px;
margin-left: 10px;
width: 277px;}

Thanks a lot Brother .
Very Helpful Gist .

Hello, thanks a lot.
I am working with the jQuery isotope plugin and would like to display only items from a particular group when the page loads. Currently all of the items are displaying. Do you have any idea how can a particular group when the page loads?

I find it. I have to change the parameter * in the isotope.pkgd.min file and fix my html files.
Have a nice day