Mauerwerk hat Räume noch alle Zellen gleiche Breite haben

Question

Es ist seltsam, Mauerwerk großer Raum fehlt, und doch alle li haben die gleiche Breite:

HTML:

<div class="one-gallery"> 
    <section class="grid-wrap"> 
     <ul class="one-grid"> 
      <li class="grid-sizer"></li><!-- for Masonry column width --> 
      <li class="itemMG"> 
       <figure> 
        <img alt="Img 0 " src="images/1.jpg" > 
        <figcaption><h3> 0 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption> 
       </figure> 
      </li> 
      <li class="itemMG"> 
       <figure> 
        <img alt="Img 0 " src="images/2.jpg" > 
        <figcaption><h3> 1 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption> 
       </figure> 
      </li> 
     </ul> 
    </section> 
</div> 

CSS:

.one-gallery ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.one-gallery figure { 
    margin: 0; 
} 

.one-gallery figure img { 
    display: block; 
    width: 100%; 
} 
/* Grid style */ 
.grid-wrap { 
    max-width: 1400px; 
    margin: 0 auto; 
} 

.one-grid { 
    margin: 0 auto; 
} 

.one-grid li { 
    width: 24%; 
    float: left; 
    cursor: pointer; 
} 

.one-grid figure { 
    padding: 15px; 
    -webkit-transition: opacity 0.2s; 
    transition: opacity 0.2s; 
} 

JS: Mauerwerk wird automatisch gestartet. * Mauerwerk PACKAGED v4.2.0

Sie alle haben die gleiche Breite, es sollte also kein Leerzeichen sein. Was kann ich tun, um es zu beheben?

Answer 1

Ich denke, dass Sie imagesLoadedhttps://imagesloaded.desandro.com/ nicht verwenden. So wird Ihr Mauerwerk erstellt, bevor alle Bilder geladen sind - und deshalb haben Sie diese Lücken.