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

【问题标题】：Masonry js always opens with some gutter砌体 js 总是以一些排水沟打开
【发布时间】：2013-11-02 03:49:25
【问题描述】：

我使用 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);
        } 
    });
};

这是一个截图：

在我调整大小后，它看起来应该是这样的：

【问题讨论】：

标签： javascript css grid jquery-isotope

【解决方案1】：

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

【讨论】：

谢谢您的回答；它引导我找到解决方案。一旦有能力，我将发布解决方案作为答案。