Question

我使用砌體有一個基於流體瓷磚的網格。在這個網格中，我不需要陰溝，我想要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

我有一個類似的問題，兩件事情似乎解決了這個問題。首先將圖片尺寸高度和寬度添加到網格中圖片的每個周圍div。第二次調用masonry.reload（）或masonry.append來告訴砌體它已經改變了。你也可以嘗試打包或者使用jquery插件。還有很多不是那麼出名。檢查我的答案：Masonry images overlapping issue。