同位体のjavascriptプラグインを使用して、どうすればギャップを取り除くことができますか？

Question

ユーザーが投稿したすべての写真を取り込んでグリッドにレイアウトし、ブラウザのアスペクト比/解像度に応じてリフローするグリッドを作成しようとしています。

アイソトープは、このための事実上のライブラリのように見えます。私が見たデモ1つにつきすべてが実装されています。私は2つの静的なサイズの画像を使用しています（ポートレート解像度は346x533、風景解像度は520x347）。写真はすべて同じサイズか、他の写真の高さの半分であるので、これは素敵なグリッドにする必要があります。問題は、グリッドをレンダリングしていないと思っています。時々私は、レイアウトは、問題のjsfiddleですが、ウィンドウを最大化して見ることのhtmlセクションを展開する必要があります。ここ

HTML: 
      <div class="ga"> 
      <div class="row"> 
       <div class="gridsa"> 
        <div class="gridsa-sizer"></div> 
        <div class="gridsa-item"> 
         <img src="img/tile1.jpg" class="img-port"/> 
        </div> 
        <div class="gridsa-item"> 
         <img src="img/tile7.jpg" class="img-land"/> 
        </div> 
        <div class="gridsa-item tile3"> 
         <img src="img/tile3.jpg" class="img-land"/> 
        </div> 
        <div class="gridsa-item"> 
         <img src="img/tile4.jpg" class="img-land"/> 
        </div> 
        <div class="gridsa-item"> 
         <img src="img/tile7.jpg" class="img-land"/> 
        </div> 
        <div class="gridsa-item"> 
         <img src="img/tile6.jpg" class="img-land"/> 
        </div> 
        <div class="gridsa-item"> 
         <img src="img/tile8.jpg" class="img-land"/> 
        </div> 
       </div> 
      </div> 
     </div> 

    CSS 
    * { box-sizing: border-box; } 




    /* ---- isotope ---- */ 
    .gridsa { 
    background: #ffcc33; 
    margin: 0px auto; 
    } 

    /* clear fix */ 
    .gridsa:after { 
    content: ''; 
    display: block; 
    clear: both; 
    } 
    /* ---- .grid-item ---- */ 
    .gridsa-sizer, 
    .gridsa-item { 
     width: 33.333%; 
    } 

    .gridsa-item { 
    padding:0px; 
    float:left; 
    } 
    .gridsa-item img { 
    display: block; 
    max-width: 100%; 
    position:relative; 


} 
.gridsa-item h2{ 
    color:#ffffff; 
    position: absolute; 
    bottom: 5%; 
    left: 33.3%; 
    width: 100%; 
} 

.gridsa-item.tile2 h2{ 
    color:#ffffff; 
    position: absolute; 
    bottom: 1px; 
    left: 25%; 
    width: 50%; 
} 

.gridsa-item.tile3 h2{ 
    color:#ffffff; 
    position: absolute; 
    bottom: 1px; 
    left: 0; 
    width: 80%; 
} 



.ga{ 
    background-color: #0c5449; 
} 

    JS 
       <script type="text/javascript"> 
        $(document).ready(function() { 
        // init Isotope 
         var $grid = $('.gridsa').isotope({ 
          itemSelector: '.gridsa-item', 
          percentPosition: true, 
          masonry: { 
           columnWidth: '.gridsa-sizer' 
          } 
         }); 
         // layout Isotope after each image loads 
         $grid.imagesLoaded().progress(function() { 
          $grid.isotope('layout'); 
         }); 
        }); 
       </script> 

、それらの中に巨大なギャップを持っている返さ取得しています問題。 https://jsfiddle.net/x6dhwh6k/2/

Answer 1

あなたの画像サイズは、所望の効果を達成するために

利用可能なスペースよりも小さいので、これは

.gridsa-item img { 
    width: 100%; 
    height: auto; 
    max-width: 100%; 
} 

のようなあなたのimg

にwidth: 100%を適用するには、今更新フィドルhttps://jsfiddle.net/x6dhwh6k/3/

を参照してください起こります画像のアスペクト比を維持するためには、私はそれがどのように動作するべきであるかのようにアイソトーププラグインで大丈夫だと思います。