砌体JS响应不起作用

Question

我使用砌体js创建了一个布局。一切都很好。但问题是每当我尝试调整浏览器大小时，我的砌体布局都没有响应。这是我做的：

<div class="grid">
    <div class="grid-item grid-item--width4 grid-item--height4"></div>
    <div class="grid-item grid-item--height4"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height4"></div>
    <div class="grid-item grid-item--width4 grid-item--height4"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--height4"></div>
    <div class="grid-item"></div>
    <div class="grid-item grid-item--width4 grid-item--height4"></div>
    <div class="grid-item"></div>
</div>



<script type="text/javascript">
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 80
});

CSS：

/** grid system **/
.grid {
  background: #000;
  max-width: 1200px;
  width: 960px;
}

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

/* ---- grid-item ---- */

.grid-item {
  width: 240px;
  height: 161px;
  float: left;
  /* vertical gutter */
  background: #000000;
  border: 5px solid #fff;
}

.grid-item--width4 { width: 480px; }
.grid-item--height4 { height: 322px; }