混合砌体和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; 
}