如何去除砌體中的縫隙？

我想在我的網站上使用砌體來創建一個pinterest般的網格佈局。如何去除砌體中的縫隙？

然而，這是當我測試我的代碼的結果： enter image description here

正如你可以看到有在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; 
}

來源

2014-09-21 RickyHalim

如果你想在所有沒有間隙，你應該嘗試調用磚石無任何選項：

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

已經在砌體上進行了測試 - 例如，這裏是Masonry，columnWidth：60（在這個例子中設置）。您應該從這裏檢查示例和文檔：Masonry options。在提供的例子中，你可以測試不同的選項，並添加你的HTML和CSS，因爲我已經做了，只是刪除了你爲磚石設置的選項。我只是在這裏保存了結果：Masonry Codepen
我將示例HTML替換爲您的項目的3個副本（因此有足夠的項目來創建佈局）並添加了您的CSS。由於我不確定是否要覆蓋砌體css，因此只能在砌體css結尾添加。

來源

2014-09-21 02:32:05

非常感謝！有用！ – RickyHalim 2014-09-21 23:13:41

如何去除砌體中的縫隙？

回答

相關問題