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无关，它是你的CSS实现。

您正在浮动.grid-item并将此宽度设置为25％。但是，其中的图像仍然使用其原生尺寸。

试试这个：

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

混合Masonry和jQuery.Lazy（）;

1 个答案: