isotope required css

/**** 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;
     -moz-transition-property: height;
      -ms-transition-property: height;
       -o-transition-property: height;
          transition-property: height;
}
 
.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;
}

portfolio functions

// @http://redvinestudio.com
(function($){
 
  var $container = $('#portfolio'),
 
      // create a clone that will be used for measuring container width
      $containerProxy = $container.clone().empty().css({ visibility: 'hidden' });   
 
  $container.after( $containerProxy );  
 
    // get the first item to use for measuring columnWidth
  var $item = $container.find('.portfolio-item').eq(0);
  $container.imagesLoaded(function(){
  $(window).smartresize( function() {
 
    // calculate columnWidth
    var colWidth = Math.floor( $containerProxy.width() / 2 ); // Change this number to your desired amount of columns
 
    // set width of container based on columnWidth
    $container.css({
        width: colWidth * 2 // Change this number to your desired amount of columns
    })
    .isotope({
 
      // disable automatic resizing when window is resized
      resizable: false,
 
      // set columnWidth option for masonry
      masonry: {
        columnWidth: colWidth
      }
    });
 
    // trigger smartresize for first time
  }).smartresize();
   });
 
// filter items when filter link is clicked
$('#filters a').click(function(){
$('#filters a.active').removeClass('active');
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector, animationEngine : "css" });
$(this).addClass('active');
return false;
 
});
 
} ) ( jQuery );

Prerequisite

jquery.isotope.min.js
jquery-latest.js

template-portfolio

<?php 
/*
Template Name: Portfolio with Isotope
Based @ Pytheas Wordpress Theme @ http://www.wpexplorer.com
*/
get_header(); ?>

  <div id="page">
 
    <ul id="filters">
        <?php
            $terms = get_terms( 'portfolio_category' , array( 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => 0 ) );
            $count = count($terms);
                echo '<li><a href="javascript:void(0)" title="" data-filter=".all">All</a></li>';
			{
                foreach ( $terms as $term ) {
					          //$termlist = '';
                    $termname = strtolower($term->name);
                    $termname = str_replace(' ', '-', $termname);
					
					// adds link-html when taxonomy contains posts
					$numberofposts = $term->count;
					// we add the condition if there are posts in terms
					if ($numberofposts == 0) { $before = ''; $after =''; } else if ($numberofposts >= 1)
					// we build the term list with conditions
					{ $before = '<a href="javascript:void(0)" title="" data-filter=".'.$termname.'">'; $after ="</a>"; }	
					//echo our term list
					echo $term_list = '<li>' . $before . $term->name . $after . '</li>';
                }
            }
        ?>
    </ul>
 
    <div id="portfolio">
 
    <?php 
       $args = array( 'post_type' => 'portfolio' );
       $loop = new WP_Query( $args );
			while ( $loop->have_posts() ) : $loop->the_post(); 
 
		   $terms = get_the_terms( $post->ID, 'portfolio_category' );						
				if ( $terms && ! is_wp_error( $terms ) ) : 
	 
					$links = array();
					
					foreach ( $terms as $term ) {
						$links[] = $term->name;
					}
					$tax_links = join( " ", str_replace(' ', '-', $links));          
					$tax = strtolower($tax_links);
				else :	
				$tax = '';					
				endif; 
	 
			echo '<div class="all portfolio-item '. $tax .'">';
			global $wpex_count;
			
	$wpex_clr_margin = ( $wpex_count == 1 ) ? 'clr-margin' : NULL; { ?>
        
	   <article id="#post-<?php the_ID(); ?>" <?php post_class('portfolio-entry col span_6 '. $wpex_clr_margin); ?>>
			<?php
			// Display featured image
			if( has_post_thumbnail() ) { ?>
				<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark" class="portfolio-entry-img-link">
					<img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), wpex_img('portfolio_entry_width'),  wpex_img('portfolio_entry_height'),  wpex_img('portfolio_entry_crop') ) ?>" alt="<?php the_title(); ?>" class="portfolio-entry-img" />
				</a>
			<?php } ?>
			<div class="portfolio-entry-description">
				<h2><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
				<div class="portfolio-entry-excerpt">
					<?php
					//show trimmed excerpt if default excerpt is empty
					echo ( !empty( $post->post_excerpt) ) ? get_the_excerpt() : wp_trim_words(get_the_content(), 15); ?>
				</div><!-- .portfolio-entry-excerpt -->
			</div><!-- .portfolio-entry-description -->
		</article><!-- /portfolio-entry -->
		
		<?php } 
        echo '</div>'; 
      endwhile; ?>
 
   </div><!-- #portfolio -->
 
  </div><!-- #page -->
 
<?php get_footer(); ?>