如何使用同位素和惰性加载一起创建相册？

Question

我想使用惰性加载和同位素来创建照片厨房。我已经尝试过在stackoverflow中建议的不同解决方案，但是它们都不起作用，但我仍然有问题。有人有想法吗？预先感谢您的帮助。

这是我的最后一个代码。在此代码中，延迟加载不起作用，所有图像都立即下载。

js：

         $(window).load(function(){
    $('.grid').imagesLoaded(function(){
      $('.grid').isotope({
        itemSelector: '.grid-item',
        containerClass: 'isotope',
        layoutMode: 'masonry',
        percentPosition: true   
      });
    });
  });
  $(window).scroll(function(){
    $('.grid').isotope({
      itemSelector: '.grid-item',
      containerClass: 'isotope',
      layoutMode: 'masonry',
      percentPosition: true
    });
  });

  $(document).ready(function(){
    $('.grid-item img').lazyload({
      effect: 'fadeIn',
      threshold : 300
    });
  });

css和html：

    .grid {
max-width: 69em;
list-style: none;
margin: 20px auto;
padding: 0;
    }
    .grid::after {
      content: "";
      clear: both;
      display: table;
    }
    .grid-sizer,
    .grid-item {
  display: block;
  padding: 7px;
    }
    @media (min-width: 530px) {
     .grid-sizer,
     .grid-item {
        float: right;
        width: 50%;
      }
    }
    @media (min-width: 960px) {
     .grid-sizer,
     .grid-item {
        width: 33%;
     }
    }

    <div class="grid">
      <div class="grid-sizer"></div>
      <div class="grid-item">
        <img src="assets/images/gallery/01.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/02.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/03.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/04.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/05.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/06.JPG"/>
      </div>
      <div class="grid-item">
        <img src="assets/images/gallery/07.JPG"/>
      </div>
    </div>