当与媒体查询结合使用时，jQuery Mansonry插件不会重新呈现

Question

我想要做的是基于流体列宽实现IE8 +响应式mansonry布局。

当网站呈现时，mansonry工作正常，但在调整窗口大小后 - 媒体查询会出现一个动作，并告诉列现在应该是50％，50％而不是25％，25％，25％，25％。调整窗口大小后，Mansonry无法正常工作。

我想避免在JavaScript中编写计算。

工作示例 Codepen Demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.min.js"></script>

<div class="container js-masonry">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item wide-2">item3 wide-2</div>
  <div class="item">item 4</div>
  <div class="item wide-2 tall-2">item 5 wide-2 tall-2</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
</div>

CSS

.container {
  overflow: hidden;
}
.item {
  height: 50px;
  float: left;
  outline: solid 1px white;
  &.wide-2,
  &.tall-2 {
    background: gray;
  }
  &.tall-2 {
    height: 100px;
  }
}
@media (max-width : 500px){
  .item {
    background: green;
    width: 50%;
    &.wide-2 {
      width: 100%;
    }
  }
}
@media (min-width : 501px){
  .item {
    background: blue;
    width: 25%;
    &.wide-2 {
      width: 50%;
    }
  }
}