砌體放置塊之間有巨大的空間

Question

砌體有一個巨大的問題：它使塊之間有一些無用的空間。我已經嘗試了一切，但沒有任何幫助。如果有人能告訴我如何解決這個問題，我真的會感到厭煩。檢查截圖。 Result 更新：我想通了，問題從第一個數字「T恤」開始。不知何故，當我從那裏刪除類寬度爲1時，一切都符合它的意思。 爲什麼會發生這種情況，我該如何解決這個問題？有什麼建議麼？我真的不能刪除這個數字，必須有一些方法來適應其他區塊。請幫忙。

var elem = document.querySelector('.grid'); 
 
var msnry = new Masonry(elem, { 
 
    // options 
 
    itemSelector: '.grid-item', 
 
    columnWidth: 230 
 
}); 
 

 
// element argument can be a selector string 
 
// for an individual element 
 
var msnry = new Masonry('.grid', { 
 
    // options 
 
});

main 
 
{ 
 
\t height: 630px; 
 
\t margin-top: 40px; 
 
\t margin-left: 18%; 
 
\t width: 1500px; 
 
} 
 

 
figcaption 
 
{ 
 
\t position: absolute; 
 
\t width: 100%; 
 
    height: 41px; 
 
\t bottom: 0px; 
 
\t padding-top: 13px; 
 
\t padding-left: 20px; 
 
    font-size: 21.333px; 
 
    font-family: "SegoeUIBold"; 
 
    opacity: 0.8; 
 
    background-color: #FFF; 
 
} 
 

 
.grid-item 
 
{ 
 
\t width: 230px; 
 
\t height: 180px; 
 
\t margin-right: 10px; 
 
\t margin-bottom: 10px; 
 
\t float: left; 
 
} 
 
.height-1 
 
{ 
 
\t height: 370px; 
 
} 
 

 
.width-1 
 
{ 
 
\t width: 360px; 
 
} 
 

 
.width-2 
 
{ 
 
\t width: 470px; 
 
} 
 

 
.height-2 
 
{ 
 
\t width: 360px; 
 
\t height: 370px; 
 
} 
 

 
.width-2 img 
 
{ 
 
\t width: 470px; 
 
\t height: 180px; 
 
}

<main class="grid"> 
 
     <figure class="grid-item height-1 width-1"> 
 
     <img src="img/greenTshirt.png" alt=""> 
 
     <figcaption>T-Shirts</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/cards.png" alt=""> 
 
     <figcaption>Cards</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/pens.png" alt=""> 
 
     <figcaption>Pens &amp; Pencils</figcaption> 
 
     </figure> 
 
     <figure class="grid-item width-2"> 
 
     <img src="img/notebooks.png" alt=""> 
 
     <figcaption>Notebooks</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/toys.png" alt=""> 
 
     <figcaption>Toys</figcaption> 
 
     </figure> 
 
     <figure class="grid-item height-1"> 
 
     <img src="img/bags.png" alt=""> 
 
     <figcaption>Bags</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/scrum.png" alt=""> 
 
     <figcaption>Scrum cards</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/magnets.png" alt=""> 
 
     <figcaption>Magnets</figcaption> 
 
     </figure> 
 
     <figure class="grid-item width-1"> 
 
     <img src="img/redCaps.png" alt=""> 
 
     <figcaption>Caps</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/magnets.png" alt=""> 
 
     <figcaption>Magnets</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/pens.png" alt=""> 
 
     <figcaption>Pens &amp; Pencils</figcaption> 
 
     </figure> 
 
     <figure class="grid-item"> 
 
     <img src="img/toys.png" alt=""> 
 
     <figcaption>Toys</figcaption> 
 
     </figure> 
 
    </main>

Answer 1

你錯過imagesLoaded。

例如：

// init Masonry 
var $grid = $('.grid').masonry({ 
    // options... 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
});