砌体放置块之间有巨大的空间

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'); 
});