如何消除砌体间隙？

Question

我正在尝试使用Masonry在我的网站中创建类似pinterest的网格布局。

然而，这是我测试代码时的结果：

正如您所看到的，div之间存在很大差距。如何删除它们？

以下是我的代码： HTML

<div class="itemsList">
      <div class="item"></div>
      <div class="item w2"></div>
      <div class="item"></div>
      <div class="item w2"></div>
      <div class="item h2"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

砌体

$( function() {

         $(".itemsList").masonry({
          columnWidth: 1,
          itemSelector: ".item",
          gutter: 15
        });     
    });

CSS

.item {
    width:120px;
    height: 160px;
    float: left;
    margin-right:5px;
    margin-top:10px;
    background: #CCC;
     vertical-align: top;
}


.item.h2 {
    height: 130px;
}

Answer 1

如果您根本不想要任何空隙，您应该尝试在没有任何选项的情况下调用砌体：

$(".itemsList").masonry({
});  

已经在砌筑实例上进行过测试，例如：这里Masonry的columnWidth：60（在此示例中设置）。 您只需查看此处的示例和文档：Masonry options。在提供的示例中，您可以测试不同的选项并添加您的html和css，就像我已经做的那样，只是删除了您为砌体设置的选项。我刚把结果保存在这里：Masonry Codepen
我将示例HTML替换为3个项目副本（因此有足够的项目来创建布局）并添加了您的CSS。由于我不确定你是否要覆盖砌体css，它只是在砌体css的末尾添加。