Изотопная упаковка макета укладки изображений

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

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

Взгляните на эту ссылку http://packery.metafizzy.co/

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

Когда я переключился на вышеупомянутое, это работало отлично: http://demoserver.co.za/test3.html