चिनाई उनके बीच विशाल रिक्त स्थान वाले ब्लॉक रखता है

Question

चिनाई के साथ एक बड़ी समस्या है: यह ब्लॉक के बीच कुछ बेकार जगह बनाता है। मैंने पहले से ही सब कुछ करने की कोशिश की है, लेकिन कुछ भी मदद नहीं करता है। अगर कोई मुझे बता सकता है कि इस समस्या को कैसे हल किया जाए तो मैं वास्तव में प्रशंसा करूंगा। स्क्रीनशॉट जांचें। Result अद्यतन: मुझे पता चला कि समस्या पहली आकृति "टी-शर्ट्स" से शुरू होती है। किसी भी तरह, जब मैं कक्षा चौड़ाई -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'); 
});