Укладка изотопной упаковки в стеке изображений

Question

Я пытаюсь создать макет пакета, который использует ширину изображения. Будь то 400 пикселей или ширина всего контейнера, я хотел бы заполнить пространство моими изображениями. Я тоже не хочу никаких пробелов. Может кто-то сказать, где я ошибаюсь. Код и код указаны ниже.

<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

У меня был точно такой же вопрос и перешли на пакет packery.

Посмотрите на эту ссылку http://packery.metafizzy.co/

Когда я попытался использовать изотоп с режимом макета packery это не сработало: http://demoserver.co.za/test2.html

Когда я перешел к вышесказанному он работал большой: http://demoserver.co.za/test3.html