如何使用CSS制作滚动加载的图片展示效果的实现步骤

<div class="container">
  <ul class="image-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 更多图片 -->
  </ul>
</div>

.container {
  height: 500px; 
  overflow-y: scroll; 
}

.image-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-list li {
  margin-bottom: 20px; 
}

.container:after {
  content: "";
  display: block;
  height: 200px; 
  visibility: hidden;
}

// 监听滚动事件
document.querySelector(".container").addEventListener("scroll", function() {
  var container = this;
  
  // 判断是否到达滚动加载的位置
  if (container.scrollHeight - container.scrollTop === container.clientHeight) {
    // 加载新的图片
    var imageList = document.querySelector(".image-list");
    var li = document.createElement("li");
    var img = document.createElement("img");
    
    img.src = "new_image.jpg";
    img.alt = "New Image";
    
    li.appendChild(img);
    imageList.appendChild(li);
  }
});