I am creating a portfolio page designed to use quicksand plug-in. Listed here are my codes

CSS :

/*List-style-type makes sure there aren't any bullets in front of the buttons*/
.load-portfolio {
    width: 610px;
    height: 22px;
    margin: 20px 0;
    list-style-type: none;
}
/*Floating left lines them up in a horizontal row, the right margin spaces them out*/
.load-portfolio li {
    height: 22px;
    float: left;
    margin: 0 10px 0 0;
    text-transform: uppercase;
    text-decoration: none;
    font-family:  'Arvo', serif;
    font-size: 12px;
}
/*The padding and background color are what make it look like a button*/
.load-portfolio li a {
    height: 20px;
    padding: 4px 5px;
    background: #8c8272;
    color: #e5e5e5;
    text-decoration: none;
}
/*When we hover on the button, the colors change*/
.load-portfolio li a:hover {
    background: #d9dac0;
    color: #8c8272;
}
/*Let's make the active job type a different color as well*/
.load-portfolio li.active a {
    background: #f85d7e;
}

/*Again getting rid of the bullets*/
.portfolio-grid {
    /*width: 610px;*/
    margin: 0;
    list-style-type: none;
}
/*Floating left gets us the grid. There's some stuff in here you probably could omit, like the height and width.*/
.portfolio-grid li {
    width: 180px;
    height: 204px;
    float: left;
    margin:0 20px 0 0;
    text-align: center;
}
/*Let's get that title to display like a nice label. If you wanted to get really fancy you could add some opacity values.*/
.portfolio-grid .portfolio-title {
    display: block;
    width: 170px;
    padding: 3px 5px;
    background: #D9DAC0;
    position: relative;
    bottom: 16px;
    font-size: 10px;
    text-transform: uppercase;
}

jQuery

jQuery(document).ready(function() {

  // get the action filter option item on page load
  var filterType = jQuery('.load-portfolio li.active a').attr('class');

  // get and assign the ourHolder element to the
    // $holder varible for use later
  var holder = jQuery('ul.portfolio-grid');

  // clone all items within the pre-assigned $holder element
  var data = holder.clone();

  // attempt to call Quicksand when a filter option
    // item is clicked
    jQuery('.load-portfolio li a').click(function(e) {

        e.preventDefault();

        // reset the active class on all the buttons
        jQuery('.load-portfolio li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var filterType = jQuery(this).attr('class');
        jQuery(this).parent().addClass('active');

        if (filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var filteredData = data.find('li');
        }
        else {
            // find all li elements that have our required $filterType
            // values for the data-type element
            var filteredData = data.find('li[data-type~=' + filterType + ']');
        }

        // call quicksand and assign transition parameters

        holder.quicksand(filteredData, {
            duration:800,
            easing: 'easeInOutQuad'
        });

        return false;
    });

});

PHP

<ul class="load-portfolio">
        <li class="active"><a href="#" class="all">All</a></li>
        <?php       
        $defaultTerm = "wordpress";
        ?>
        <?php
        $args = array( 'taxonomy' => 'portfolioproductstype' );
        $terms = get_terms('portfolioproductstype', $args);
        $count = count($terms); $i=0;
        if ($count > 0) {
            $cape_list = '';
            foreach ($terms as $term) {
                $i++;
                $term_list .= '<li';
                if(strtoupper($term->name) == strtoupper($defaultTerm)){
                    $term_list .= '>';// class="active">';
                }else{
                    $term_list .= '>';
                }

                $term_list .= '<a href="#" class="'. $term->name.'">' . $term->name . '</a></li>';
                if ($count != $i) $term_list .= ''; else $term_list .= '';
            }
            echo $term_list;
        }
         ?>
    </ul>

    <ul class="portfolio-grid">
        <?php
        $pfportfolio = new WP_Query( 'post_type=portfolioproducts' );
        while ( $pfportfolio->have_posts() ) : $pfportfolio->the_post();?>
        <?php
        echo '<div id="sandbox-products"';
        $terms_as_text = strip_tags( get_the_term_list( $post->ID, 'portfolioproductstype', '', ' ', '' ) );
        if(strtoupper($terms_as_text) != strtoupper($defaultTerm)){
            echo '>';//' style="display:none;">';   
        }else{
            echo '>';   
        };
            echo '<li data-id="post-'.get_the_ID().'" data-type="'.$terms_as_text.'">';
            the_post_thumbnail('home-feat');
            echo '<span class="portfolio-title">';
            the_title();
            echo '</span>';
            echo '</li>';
        echo '</div>';
        endwhile;
        wp_reset_postdata();
        ?>
    </ul>

My issue is

After I click any filter button, pre and post the quicksand animation, my products bounce up and lower. Will not make any sense. Like after i click any category, all the products go some 10 px lower and following the animation they return for their normal position. This messes up my transition.

UPDATE - This issue happens on Chrome. After I test the machine on IE or Opera it really works correctly

How do i solve it?