Kamieniarstwo umieszcza bloki z ogromnymi przestrzeniami między nimi

Question

Istnieje ogromny problem z murze: tworzy kilka bezużytecznych przestrzeni między blokami. Próbowałem już wszystkiego, ale nic nie pomaga. Naprawdę doceniłbym, gdyby ktoś mógł mi powiedzieć, jak rozwiązać ten problem. Sprawdź zrzut ekranu. Result AKTUALIZACJA: Pomyślałem, że problem zaczyna się od pierwszej figury "T-shirty". W jakiś sposób, kiedy usuwam szerokość klasy-1 z tego miejsca, wszystko pasuje tak, jak powinno. Dlaczego tak się dzieje i jak mogę rozwiązać ten problem? Jakieś sugestie? Naprawdę nie mogę usunąć tej liczby, musi istnieć jakiś sposób dopasowania jej do innych bloków. Proszę pomóż.

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

Brakuje imagesLoaded.

przykład:

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