使用同位素JavaScript插件，我該如何擺脫差距？

Question

我正在嘗試構建一個網格，它將用戶提交的所有照片放置到一個整齊的網格中，該網格將響應瀏覽器的高寬比/分辨率。

同位素看起來像這是事實上的庫。我觀看過的每個演示都實現了一切，我使用了兩個靜態大小的圖像（縱向分辨率爲346x533，橫向分辨率爲520x347）。由於圖片的大小相同，或者是另一半的高度，這應該是一個很好的網格。問題是，它並不像我所期望的那樣渲染網格。有時候，我得到的佈局返回這對他們有巨大的差距，

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> 

這是問題的一個的jsfiddle，但你需要將窗口最大化，並展開HTML部分看問題。 https://jsfiddle.net/x6dhwh6k/2/

Answer 1

出現這種情況是因爲你的圖像大小超出了可用空間小

實現願望效果應用於width: 100%您IMG

像

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

現在看到更新的小提琴https://jsfiddle.net/x6dhwh6k/3/

爲了保持圖像寬高比，你可能會在ima下看到很小的差距ge，但我想這就是確定同位素插件，因爲這是它應該如何工作