Isotop Packery Layout Bilder stapeln

Question

Ich versuche, ein Packery-Layout zu erstellen, das die Breite eines Bildes verwendet. Egal ob 400px oder die Breite des gesamten Containers, ich möchte den Platz mit meinen Bildern füllen. Ich möchte auch keine Leerzeichen. Kann mir jemand sagen, wo ich falsch liege? Code und Codepen sind unten.

<div class="grid" style="width:1200px; height:100%; background:salmon"> 
<!-- <div class="grid-sizer"></div> --> 
    <div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:200px" /></div> 
    <div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:400px"/></div> 
    <div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div> 
    <div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:600px"/></div> 
    <div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:900px"/></div> 
    <div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div> 
</div> 

$('.grid').isotope({ 
    // options 
    layoutMode: 'packery', 
    packery: { 
    columnWidth: '.grid-item' 
    }, 
    itemSelector: '.grid-item', 
    percentPosition: true 

}); 

http://codepen.io/Jesders88/pen/GrpqQr

Answer 1

hatte ich genau das gleiche Problem und wechselte zu einem Packery Paket.

unter diesem Link Werfen Sie einen Blick http://packery.metafizzy.co/

Wenn ich mit einem Packery Layout-Modus unter Verwendung von Isotopen versucht es nicht funktioniert: http://demoserver.co.za/test2.html

Als ich auf die geschaltete darüber große gearbeitet: http://demoserver.co.za/test3.html