javascript - 为什么我的masonry.js项彼此重叠？

我正在尝试使用流行的masonry.js库，但是所有砌体项目彼此重叠，而不是被布置为砌体样式。

我已经阅读了很多文档，并且可以肯定答案在某个地方，但是我找不到它。

jQuery('.grid').masonry({
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  itemSelector: '.grid-item'
});

.grid-sizer,
.grid-item {
  width: 40%;
}

.gutter-sizer {
  width: 4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some Other here
  </div>
  <div class="grid-item">
    Blah blah blah
  </div>
  <div class="grid-item">
    asdfasdff
  </div>
  <div class="grid-item">
    214421342143
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
</div>

最佳答案

我自己解决了。

我忘记添加gutter-sizer和grid-sizer html。

jQuery('.grid').masonry({
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer',
  itemSelector: '.grid-item'
});

.grid-sizer,
.grid-item {
  width: 40%;
}

.gutter-sizer {
  width: 4%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some Other here
  </div>
  <div class="grid-item">
    Blah blah blah
  </div>
  <div class="grid-item">
    asdfasdff
  </div>
  <div class="grid-item">
    214421342143
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
  <div class="grid-item">
    Some text here
  </div>
</div>

<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>