砌体/同位素 - 过滤器图像后不再对齐

Question

我有一个Masonry布局，使用Isotope来过滤我的结果。

但是一旦你点击过滤器，然后返回＆＃34;所有＆＃34;图像不会返回相同的布局。

你可以在这里看到它：http://bollu.co.uk/page/work.php

这是在使用几个过滤器后它为我显示的：

任何帮助都会很棒！

我的CSS是：

.grid {
    width:85%;
    height:auto;
    margin:0px auto;
    position:relative;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 25%;
  position:relative;
}

.grid-item {
  height: auto;
  float: left;
}

.grid-item img {
  width:100%;
  height:auto;
}

.grid-item--width2 { width:  50%; }


.grid-item:hover .work-logo{
    visibility: visible;
    opacity: 0.9;
}

.grid-item--width2 .work-logo img {
    top:20%;
    left:20%;
    width:60%;
}

JS：

<script src="js/isotope.js"></script>
<script>
$( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
  });
  // filter functions
  var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };
  // bind filter button click
  $('.filters-button-group').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $grid.isotope({ filter: filterValue });
  });
  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});
</script>