We have used mixitup filtering plugin to filter the works
1. Html Markup Set
html markup

<div class="portfolio-filter">
	<ul>
		<li class="filter" data-filter="all">Show All</li>
		<li class="filter" data-filter=".photography">Photoraphy</li>
		<li class="filter" data-filter=".design">Design</li>
	</ul>
</div>

<div id="portfolio-items-wrapper">
	<div class="row">
		<div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
	    	<div class="portfolio-block">
	    		<img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-2.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-3.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix photography" >
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-4.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix design">
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-5.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix design">
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-6.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix design">
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-7.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	    <div class="col-md-3 col-sm-6 col-xs-6 mix design">
	    	<div class="portfolio-block">
		    	<img class="img-responsive" src="img/portfolio/portfolio-1.jpg" alt="">
	    		<div class="caption">
	    			<a class="search-icon" href="img/portfolio/portfolio-1.jpg" data-lightbox="image-1">
	    				<i class="tf-search"></i>
		    		</a>
	    			<h4><a href="">AirBnB Postcard</a></h4>
	    		</div>
	    	</div>
	    </div>
	</div>
</div>

Add your menu with data-filter for filtering your contents. Then add mix and the data-filter name your want filter on your content.

2. Mixitup initialization on custom.js file

jQuery code

$(function(){
    $('#portfolio-items-wrapper').mixItUp();
});

initialize with the id of your contents parent

If you want to know more about mixitup try this following link – https://www.kunkalabs.com/mixitup/