アイソトープパッカーレイアウトスタッキングイメージ

イメージの幅を使用するパッペリーレイアウトを作成しようとしています。それが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

出典

2017-01-09 jesders88