砌体js总是打开一些排水沟

Question

我使用Masonry来制作基于流体瓷砖的网格。在这个网格中，我想要没有排水沟，我想拥有3种不同类型的瓷砖：1x1,2x1,2x2和1x2。我有这个工作，但我唯一的问题是，砌体似乎开始在瓷砖之间的一些排水沟。如果我稍微调整窗口大小，这些瓷砖的尺寸合适，没有排水沟。

继承人我的HTML：

<div class="masonry js-masonry"  data-masonry-options='{"itemSelector": ".item" }'>
  <div class="grid-sizer"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;" ></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2 h3" style="background:url('images/img-3.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2 h3" style="background:url('images/img-3.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
</div>

我的CSS

.masonry {
  background: #EEE;
  width: 100%;
}
.masonry .item,
.masonry .grid-sizer {
  width:  25%;
}
.masonry .item,
.masonry .grid-sizer {
  height: 60px;
  float: left;
}       
.item { width:  25%; }
.item.w2 { width:  50%;}

还有一些Javascript用于调整窗口大小并获得正确的平铺高度：

var tileHeight = 0;

$(function(){
    $(window).resize(function() {
        onResize();
    });
    onResize();
});


function onResize(){
    tileHeight = $(".grid-sizer").width();
    $(".item").each(function(){
        var $this = $(this);
        if($this.hasClass("h2")){
            $this.height(tileHeight*2);
        } else if($this.hasClass("h3")){
            $this.height(tileHeight*3);
        } else{
            $this.height(tileHeight);
        } 
    });
};

这是截图：

在我调整大小后，它看起来应该如此：

Answer 1

我有类似的问题，似乎解决了两件事。首先将pic尺寸高度和宽度添加到网格中pic的每个周围div。第二次调用masonry.reload（）或masonry.appended告诉砌体它已经改变了。您也可以尝试使用packagery或wookmark jquery插件。还有很多不那么有名的。检查我的回答：Masonry images overlapping issue。