Masonry (grid) with window.history.pushState

Question

I created layout with masonry and window.history.pushState html5 script. For example, i have 5 menu items. Each menu item, has grid included. Everything seems to be just perfect, but the problem is that when i am clicking on the next menu item, masonry stops working. Then, i tryed to reload modernizr when menu item is clicked. Now, masonry starts to work when i am clicking on menu item not one time, but twice.

HTML:

<div class="blokeliai">
  <img src="img/single-6.jpg" alt="" />
</div>

<div class="blokeliai">
  <img src="img/single-7.jpg" alt="" />
</div>

etc...

<script>
   $(document).ready(function() { $.getScript('js/modernizr-2.5.3.min.js', function() { }); });
</script>

Masonry

$('.page-content').masonry({
    itemSelector: '.blokeliai',
    isAnimated: !Modernizr.csstransitions
}).imagesLoaded(function() {
    $(this).masonry('reload');
}); 

Window history pushState

Each menu item, has his own php file.

<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_GET['type']!='ajax'){
include 'header.php';
echo "<div class='page-content'>";
}
?>

//<div class="blokeliai">...etc... GOES HERE

<?php
if($_GET['type']!='ajax'){
echo "</div>";
include 'footer.php';
}?>

How can i make masonry work not with two clicks on each menu item, but with the normal, one click? Thank you, and sorry for bad english.

Answer 1

All script was wrong. Masonry works perfectly by default, but with history pushState, you need to reload masonry after ajax call.

$(document).ready(function() {
  $('.masonry').masonry({
   itemSelector: '.item'
  });
});
$( document ).ajaxComplete(function() {
$('.masonry').masonry('reloadItems').masonry();
});