如何正确堆叠砖石布局和惰性加载图像？

<div class="masonry-container">
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  ...
</div>

.masonry-container {
  display: flex;
  flex-wrap: wrap;
}

.brick {
  width: 200px;
  height: auto;
  margin-bottom: 10px;
}

window.addEventListener('load', function() {
  var container = document.querySelector('.masonry-container');
  var bricks = container.querySelectorAll('.brick');
  
  // 计算每个砖石元素的位置
  function layout() {
    var containerWidth = container.offsetWidth;
    var brickWidth = bricks[0].offsetWidth;
    var numColumns = Math.floor(containerWidth / brickWidth);
    var columnHeights = new Array(numColumns).fill(0);
    
    for (var i = 0; i < bricks.length; i++) {
      var brick = bricks[i];
      var columnIndex = i % numColumns;
      var columnHeight = columnHeights[columnIndex];
      
      brick.style.position = 'absolute';
      brick.style.left = columnIndex * brickWidth + 'px';
      brick.style.top = columnHeight + 'px';
      
      columnHeights[columnIndex] += brick.offsetHeight + 10; // 10px为砖石之间的间距
    }
    
    var containerHeight = Math.max.apply(null, columnHeights);
    container.style.height = containerHeight + 'px';
  }
  
  layout(); // 初始化布局
  
  // 当窗口大小改变时重新布局
  window.addEventListener('resize', layout);
});

<img class="lazy" data-src="image.jpg" alt="Image">

.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy.loaded {
  opacity: 1;
}

window.addEventListener('load', function() {
  var lazyImages = document.querySelectorAll('.lazy');
  
  function lazyLoad() {
    for (var i = 0; i < lazyImages.length; i++) {
      var lazyImage = lazyImages[i];
      
      if (isInViewport(lazyImage)) {
        lazyImage.src = lazyImage.dataset.src;
        lazyImage.classList.add('loaded');
        lazyImages.splice(i, 1); // 加载后从数组中移除
        i--;
      }
    }
  }
  
  function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth;
  }
  
  lazyLoad(); // 初始化加载
  
  // 监听滚动事件，实现惰性加载
  window.addEventListener('scroll', lazyLoad);
});