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

我有一个砖石布局，使用同位素过滤我的结果

但是一旦你点击一个过滤器，然后返回到“所有”图像，它就不会返回到相同的布局

你可以在这里看到它：

以下是我在使用一些过滤器后的表现：

任何帮助都会很好

我的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:

$（函数（）{
//初始同位素
变量$grid=$（'.grid'）。同位素({
itemSelector:“.grid项”，
布局模式：“fitRows”
});
//过滤函数
变量过滤器Fns={
//显示数字是否大于50
NumberCreateThan50:函数（）{
var number=$（this.find（'.number'）.text（）；
返回parseInt（数字，10）>50；
},
//显示名称是否以-ium结尾
ium：函数（）{
var name=$（this.find（'.name'）.text（）；
返回name.match（/ium$/）；
}
};
//绑定过滤器按钮单击
$（'.filters按钮组'）。在（'单击'，'按钮'，函数（）上）{
var filterValue=$（this.attr（'data-filter'）；
//如果与值匹配，则使用filterFn
filterValue=filterFns[filterValue]| | filterValue；
$grid.同位素（{filter:filterValue}）；
});
//在类按钮上选中更改
$（'.button组'）。每个（函数（i，button组）{
变量$buttonGroup=$（buttonGroup）；
$buttonGroup.on（'click'，'button'，function（）{
$buttonGroup.find（'.is-checked'）.removeClass（'is-checked'）；
$（this.addClass（'is-checked'）；
});
});
});

$grid.isototype（{filter:filterValue，layoutMode:'fitRows'}）；试着再给它一次布局模式，也可能是布局模式不正确。当我将其设置为packery时，你想要“Mashine”或“packery”@Callam，但它不过滤吗？任何想法。。。砌体以非常奇怪的方式堆叠它。@Callam完成了：）必须稍微修改砌体版本的代码。itemSelector:'.grid item'，Massiness:{columnWidth:100}$grid.同位素（{filter:filterValue，layoutMode:'fitRows'}）；试着再给它一次布局模式，也可能是布局模式不正确。当我将其设置为packery时，你想要“Mashine”或“packery”@Callam，但它不过滤吗？任何想法。。。砌体以非常奇怪的方式堆叠它。@Callam完成了：）必须稍微修改砌体版本的代码。项目选择器：'.grid项'，砌体：{columnWidth:100}

<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>