Jquery masonry issue in chrome

JavaScript
1

Hi
I am posting this issue after a rigorous search on google…
I am using masonry with twitter bootstrap …However when i click on a filter say “icons”,it stacks up the images first and on clicking twice,displays it properly.
I have noticed that it’s calculating the position wrong on 1st click and then recalculates properly on refresh…I have used “Imagesloaded” with no go.I am not sure if I am using it correctly.
Please note that all the images are loaded properly on 1st page load…
Here’s the uRL to the site I am referring to:
http://clouditheaven.org/mb/ceptes/me_flat__flat_personal_portfolio.php
Here’s my code:

	/*============================================
	Project thumbs - Masonry
	==============================================*/
	$(window).load(function(){
$('.projects-container').css({visibility:'visible'});
    $('.projects-container').masonry({
     	itemSelector: '.project-item:not(.filtered)',						
			isFitWidth: true,
			isResizable: true,
			isAnimated: !Modernizr.csstransitions,
			gutterWidth: 10		
   
  });
		scrollSpyRefresh();
		waypointsRefresh();
	});
	
	/*============================================
	Filter Projects
	==============================================*/
	$('#filter-works a').click(function(e){
	
		e.preventDefault();

		$('#filter-works li').removeClass('active');
		$(this).parent('li').addClass('active');

		var category = $(this).attr('data-filter');

		$('#portfolio .project-item').each(function(){
			if($(this).is(category)){
				$(this).removeClass('filtered');
			}
			else{
				$(this).addClass('filtered');
			}
		
		});
$container=$('#portfolio .projects-container');		
$container.imagesLoaded( function() {

  $container.masonry('reload');
}); 
 		
		scrollSpyRefresh();
		waypointsRefresh();
	});

Here’s the HTML:

<div class="container masonry-wrapper scrollimation fade-in">
			
				<div class="projects-container clearfix">
				
					<article class="project-item mock-up">
						
						<img class="img-responsive project-image" src="assets/dribbble_1.jpg"  alt=""><!--Project thumb -->
						
						<div class="hover-mask">
							<h2 class="project-title">Flat iDevices</h2><!--Project Title -->
							<p>Mock-Up</p><!--Project Subtitle -->
						</div>

					</article>
</div>
</div>