Javascript 混合砌筑和jQuery.Lazy（）；

我在一个图像网站上工作，在那里我将大量图像加载到一个砖石网格中。使用jQuery.Lazy（）；，我的图像开始重叠

html:

---

我希望有人能帮上忙

这个问题与massy.js无关，它是您对CSS的实现

您正在浮动.grid项，并将该类的宽度设置为25%。但是，其中的图像仍然使用其本机维度

试试这个：

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

<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>

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

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