Masonryと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持つには何も持っていません、それはあなたの実装です。 f CSS。

.grid-itemを浮動させて、このクラスに25％の幅を設定しています。ただし、内部の画像はまだネイティブディメンションを使用しています。

これを試してみてください：

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