[SoZo]

1. Download the isotope package and then upload the jquery.isotope.min.js to a folder titled "lib" in the child theme's directory.

2. Create a file title isotope-parameters.js and place the following into it.

$(document).ready(function () {
 
	//Set your isotope area
	var $container = $('#container'),
	filters = {};
 
	//Set our items to be filtered, .post will work if you're using the post_class(); function
	$container.isotope({
		itemSelector : '.post'
	});
    
    // filter items when filter link is clicked
    $('#filters a').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: selector });
      return false;
    })
 
});

3. Upload that file to the child theme's lib folder

4. Add this into the child theme's functions.php. Note I had to deregister WP's jquery and reload from google for some reason that I never figured out.

PHP Code:

// Load scripts
add_action( 'get_header', 'need_load_scripts' );
function need_load_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'isotope', CHILD_URL . '/lib/jquery.isotope.min.js', true );
    wp_enqueue_script( 'parameters', CHILD_URL . '/lib/isotope-parameters.js', true );
    
} 


5. Create a page template and add this for the filter selector editing the "XXX" with the ID of the category whose children you want as filters

PHP Code:

<ul id="filters" data-filter-group="color">
            <li class="filter">Filter:</li>
            <li><a href="#filter-topic-any" data-filter="" class="selected">All</a></li>
            <?php
            //Grab the child categories
            $categories = get_categories( 'child_of=XXX' );
            foreach ( $categories as $category ) {
                //and format them for use as isotope filters
                echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
            }
            ?>
            
        </ul>

6. Add your loop below that. The only important point here is to put the posts into a "<?php post_class(); ?>" div. For example something like

PHP Code:

<?php $recent = new WP_Query( 'category_name=REPLACE_WITH_PARENT_CAT_NAME&posts_per_page=999&orderby=rand' );
    while ( $recent->have_posts() ) : $recent->the_post(); ?>
            <div <?php post_class(); ?>>

                      POST CONTENT STUFF
            
            </div><!-- end .post-class -->
    <?php endwhile;
    wp_reset_query(); ?>

7. Add the isotope style rules to your style sheet along with any other rules you want

/**** 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;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-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;
       -o-transition-property:         top, left, 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;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Hope that helps