Question

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

我尝试在排水沟选择器上添加margin: 0 auto作为this post的建议，但它不会有帮助。

这是一个小提琴，我做错了吗？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

提前谢谢。

AW

修改

关于Sabuja的回答，我解决了问题，你可以在下面的 jsFiddle 中看到。

＆＃13;

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

＆＃13;

*, *: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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

该脚本无法在DOM中找到所需的类（＆＃34; item - sizer＆＃34;和＆＃39; item - gutter＆＃39;）。 JS无法从CSS文件中获取它。

columnWidth无法找到＆＃34; item - sizer＆＃34; DOM中的类。将此类添加到您需要的元素。删除线沟：＆＃39; .item - gutter＆＃39;或者将此元素添加到DOM。

Answer 2

以样式添加Css类

    .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>

砌体 - 物品堆叠在一起 - 香草JS

2 个答案: