为什么我的 masonry.js 项目相互重叠？答案

【问题标题】：Why do my masonry.js items overlap each other?为什么我的 masonry.js 项目相互重叠？
【发布时间】：2018-10-07 22:35:51
【问题描述】：

我正在尝试使用流行的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>

【问题讨论】：

标签： javascript jquery css masonry

【解决方案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>

【讨论】：