图片墙js

<div id="image-wall">
  <!-- 图片容器 -->
</div>

#image-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

#image-wall img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

document.addEventListener('DOMContentLoaded', function() {
  const imageWall = document.getElementById('image-wall');
  let page = 1;
  const limit = 20; // 每次加载的图片数量

  function loadImages() {
    fetch(`/api/images?page=${page}&limit=${limit}`)
      .then(response => response.json())
      .then(data => {
        data.forEach(image => {
          const imgElement = document.createElement('img');
          imgElement.src = image.url;
          imageWall.appendChild(imgElement);
        });
        page++;
      })
      .catch(error => console.error('Error loading images:', error));
  }

  // 初始加载
  loadImages();

  // 滚动加载更多
  window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
      loadImages();
    }
  });
});