砌体——物品相互堆叠——Vanilla JS

Question

我第一次使用 Masonry.js，我尝试在一个简单的网格中显示我的项目，但所有项目都在 position: absolute 中，所以它们相互叠加。

我尝试在装订线选择器上添加 margin: 0 auto 作为对 this post 的建议，但它无济于事。

这是一个fiddle，我做错了吗？

let grid = document.querySelector('.main__content'),
  msnry = new Masonry(grid, {
    itemSelector: '.item',
    columnWidth: '.item--sizer',
    percentPosition: true,
    gutter: '.item--gutter',
  });

.item {
  background: #eee;
  padding: 1rem;
  border: 1px solid darken(#eee, 5%);
  width: calc(50% - 2rem);
  &--sizer {
    width: calc(50% - 2rem);
  }
  &--gutter {
    width: 2rem;
  }
}

<div class="main__content">
  <div class="item">This is an item 1</div>
  <div class="item">This is an item 2</div>
  <div class="item">This is an item 3</div>
  <div class="item">This is an item 4</div>
  <div class="item">This is an item 5</div>
  <div class="item">This is an item 6</div>
  <div class="item">This is an item 7</div>
  <div class="item">This is an item 8</div>
  <div class="item">This is an item 9</div>
  <div class="item">This is an item 10</div>
  <div class="item">This is an item 11</div>
  <div class="item">This is an item 12</div>
</div>


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

提前谢谢你。

AW

编辑

关于 Sabuja 的回答，我解决了问题，如下所示 jsFiddle。

let grid = document.querySelector('.main__content'),
    msnry = new Masonry(grid, {
      itemSelector: '.item',
      columnWidth: '.item--sizer',
      percentPosition: true
    });

*, *:before, *:after {box-sizing:  border-box !important;}

.item {
  background: #eee;
  padding: 1rem;
  border: 1px solid #ddd;
  width: 50%;
  
  &--sizer {
    width: 50%;
  }
  
  &--is-invisible {
    visibility: hidden;
  }
}

<div class="main__content">
  <div class="item">This is an item 1</div>
  <div class="item">This is an item 2</div>
  <div class="item">This is an item 3 with fake news : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic et amet, autem provident ab magnam cumque nihil dolorum incidunt fugiat placeat iusto libero sapiente accusantium mollitia velit, harum minima.</div>
  <div class="item">This is an item 4</div>
  <div class="item">This is an item 5</div>
  <div class="item">This is an item 6</div>
  <div class="item">This is an item 7</div>
  <div class="item">This is an item 3 with fake news : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic et amet, autem provident ab magnam cumque nihil dolorum incidunt fugiat placeat iusto libero sapiente accusantium mollitia velit, harum minima.</div>
  <div class="item">This is an item 9</div>
  <div class="item">This is an item 10</div>
  <div class="item">This is an item 11</div>
  <div class="item">This is an item 12</div>
  
  <div class="item item--is-invisible item--sizer"></div>
  <div class="item item--is-invisible item--gutter"></div>
</div>


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

Answer 1

脚本在 DOM（"item--sizer" 和 'item--gutter'）中找不到所需的 classes。 JS 无法从 CSS 文件中获取它。

columnWidth 在 DOM 中找不到 "item--sizer" class。将此 class 添加到您需要的元素中。删除行间距：'.item--gutter' 或将此元素添加到 DOM。

Answer 2

在样式中添加Cssclass

    .list-block {
        width: 100%;
        float: left;
        height: 55px;
    }

Html代码

    <div class="main__content">
        <div class="item-block">
            <div class="item">This is an item 1</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 2</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 3</div>
        </div>  
        <div class="item-block">
            <div class="item">This is an item 4</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 5</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 6</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 7</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 8</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 9</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 10</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 11</div>
        </div>
        <div class="item-block">
            <div class="item">This is an item 12</div>
        </div>
    </div>

砌体——物品相互堆叠——Vanilla JS

Masonry -- items stack on top of each other -- Vanilla JS

html

javascript

css

masonry