js实现qq空间的相册效果

QQ空间的相册效果通常包括图片的懒加载、分页加载、缩略图预览以及大图的弹窗展示等功能。下面我将详细介绍如何使用JavaScript来实现这些效果，并提供一些示例代码。

基础概念

懒加载（Lazy Loading）：只有当图片即将进入视口时才加载图片，减少初始加载时间。
分页加载（Pagination）：将大量图片分成多个页面，每次只加载一个页面的内容。
缩略图预览：显示图片的缩略图，点击后放大查看完整图片。
大图弹窗：点击缩略图后，弹出一个模态框显示大图。

实现步骤

1. 懒加载

使用Intersection Observer API来实现懒加载。

<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<!-- 更多图片 -->

<script>
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>

2. 分页加载

使用AJAX请求来加载不同页面的图片。

<div id="photo-gallery"></div>
<button id="load-more">Load More</button>

<script>
let currentPage = 1;
const photosPerPage = 10;

document.getElementById('load-more').addEventListener('click', function() {
  fetch(`/api/photos?page=${currentPage}&per_page=${photosPerPage}`)
    .then(response => response.json())
    .then(data => {
      data.photos.forEach(photo => {
        const img = document.createElement('img');
        img.src = photo.thumbnail;
        img.classList.add('lazy');
        img.dataset.src = photo.fullsize;
        document.getElementById('photo-gallery').appendChild(img);
      });
      currentPage++;
    });
});
</script>

3. 缩略图预览和大图弹窗

使用模态框（Modal）来展示大图。

<div id="modal" class="modal">
  <span class="close-button">&times;</span>
  <img class="modal-content" id="modal-image">
</div>

<img src="thumbnail1.jpg" alt="Thumbnail 1" onclick="openModal(this.src)">
<img src="thumbnail2.jpg" alt="Thumbnail 2" onclick="openModal(this.src)">
<!-- 更多缩略图 -->

<script>
function openModal(src) {
  const modal = document.getElementById('modal');
  const modalImg = document.getElementById('modal-image');
  modal.style.display = 'block';
  modalImg.src = src;

  document.querySelector('.close-button').onclick = function() {
    modal.style.display = 'none';
  };
}
</script>

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
</style>