javascript - 为什么我的 masonry.js 元素相互重叠？

Question

我正在尝试使用流行的 masonry.js库，但所有 masonry 元素都相互重叠，而不是 masonry 风格。

我已经多次阅读文档，我确信答案就在某处，但我找不到。

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>

Answer 1

自己解决了。

我忘记添加 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>