混合砌體和jQuery.Lazy（）;

Question

我正在一個圖像網站上工作，我在這裏加載了很多圖像在砌體網格中。當使用jQuery.Lazy（）時，我的圖像開始重疊。

HTML：

<div class="grid"> 
    <div class="grid-item"> 
      <img class="lazy" src="path/to/img"> 
    </div> 
</div> 

的jQuery：

<script type="text/javascript"> 

     $(document).ready(function(){ 
       var $grid = $('.grid').imagesLoaded(function() { 
       // init Masonry after all images have loaded 
       $grid.masonry({ 
       // options... 
       }); 
      }); 

     }); 

     $(function() { 
      $('.lazy').Lazy(); 
     }); 
</script> 

CSS：

.grid-item { 
float: left; 
width: 25%; 
padding: 5px; 
} 

我希望有人能幫助

Answer 1

問題有什麼用Masonry.js，它是你的實現o f CSS。

您正在浮動.grid-item併爲此類設置25％的寬度。但是，其中的圖像仍然使用其原生尺寸。

試試這個：

.grid-item { 
    float: left; 
    width: 25%; 
    padding: 5px; 
} 
.grid-item img { 
    width: 100%; 
    height: auto; 
}