isotope ....

content-isotope.php

<ul id="filters">
    <li><a href="#" data-filter="*">Everything</a></li>
<?php
$terms = get_terms("category"); // get all categories, but you can use any taxonomy
$count = count($terms); //How many are they?
if ( $count > 0 ){  //If there are more than 0 terms
foreach ( $terms as $term ) {  //for each term:
echo "<li><a href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";
//create a list item with the current term slug for sorting, and name for label
}
}
?>
</ul>




<?php $the_query = new WP_Query( 'posts_per_page=9' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
    <?php while ( $the_query->have_posts() ) : $the_query->the_post();
$termsArray = get_the_terms( $post->ID, "category" );  //Get the terms for this particular item
$termsString = ""; //initialize the string that will contain the terms
foreach ( $termsArray as $term ) { // for each term
$termsString .= $term->slug.' '; //create a string that has all the slugs
}
?>
<div class="<?php echo $termsString; ?> item">
<h3><?php the_title(); ?></h3>
        <?php if ( has_post_thumbnail() ) {
                      the_post_thumbnail();
                } ?>
</div> <!-- end item -->
    <?php endwhile;  ?>
    </div> <!-- end isotope-list -->
<?php endif; ?>

function.php

/*----------------------------------------------------------------------------------
 register scripts used in theme
----------------------------------------------------------------------------------*/
function add_isotope() {
	 //Register styles
	 wp_register_style('isotope-css', get_stylesheet_directory_uri() . '/isotope.css' );
	 
     //Enqueue styles
     wp_enqueue_style( 'isotope-css' );		
	 
	 //Register scripts
	 wp_register_script('imagesloaded', get_stylesheet_directory_uri() . '/js/imagesloaded.pkgd.min.js', array('jquery'),  true );
     wp_register_script('isotope', get_stylesheet_directory_uri() . '/js/isotope.pkgd.min.js', array('jquery'),  true );
	 wp_register_script('isotope-query', get_stylesheet_directory_uri() . '/js/isotope-query.js', array('jquery', 'isotope') );
	 //Enqueue scripts
     wp_enqueue_script('jquery');
	 wp_enqueue_script('masonry');
	 wp_enqueue_script('imagesloaded');
     wp_enqueue_script('isotope');
	 wp_enqueue_script('isotope-query');
}
add_action('wp_enqueue_scripts', 'add_isotope');

index.php

<?php get_header(); ?>

<section class="content-isotope">

	<div class="isotope group">
	          
		
         <?php if ( have_posts() ) : ?>
             
			 
			 <div class="isotope-list">
               <?php get_template_part( 'content-isotope', 'isotope') ?>
             </div><!--/#isotope-list-->

        
         <?php endif; ?>
		

		
	</div><!--/.isotope-->
	
</section><!--/.content-isotope-->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

isotope-query.js

jQuery(function ($) {

 //set the container that isotope will be inside of in a var

var container = document.querySelector('#isotope-list');

//create empty var isotope

var Isotope;

 // initialize Isotope after all images have loaded
var $container = $('#isotope-list').imagesLoaded( function() {
  $container.isotope({
    // options
  });
});
 

 
 
var $container = $('#isotope-list'); //The ID for the list with all the blog posts
$container.isotope({ //Isotope options, 'item' matches the class in the PHP
itemSelector : '.item',
   layoutMode : 'masonry'
   isOriginLeft: false
});
var container = document.querySelector('#isotope-list');
// init
var iso = new Isotope( container, {
  // options
  itemSelector: '.item',
  
});
 
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
 
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
  return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
 
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
 
return false;
});
 
});

jQuery( function($) {
  
  $('.isotope').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 100
    }
  });

});

isotope.css

/* Start: Recommended Isotope styles */
.isotope-list{position: relative !important;
top: 50px !important;}

.filters{}
.item {width:25% !important;}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

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

.isotope,
.isotope .isotope-item {
  -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 {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.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;
}

/* End: Recommended Isotope styles */

parent theme index if u need

<?php get_header(); ?>

<section class="content">

	<?php get_template_part('inc/page-title'); ?>
	
	<div class="pad group">
		
		<?php get_template_part('inc/featured'); ?>
		
		<?php if ( have_posts() ) : ?>
		
			<div class="post-list group">
				<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
				<?php get_template_part('content'); ?>
				<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
			</div><!--/.post-list-->
		
			<?php get_template_part('inc/pagination'); ?>
			
		<?php endif; ?>
		
	</div><!--/.pad-->
	
</section><!--/.content-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>