js 实现相册

使用HTML5和JavaScript实现相册功能

创建一个基础的相册功能需要结合HTML结构、CSS样式和JavaScript交互逻辑。以下是一个简单实现方案：

HTML结构

<div class="photo-gallery">
  <div class="thumbnails">
    <img src="thumb1.jpg" data-full="full1.jpg" alt="Photo 1">
    <img src="thumb2.jpg" data-full="full2.jpg" alt="Photo 2">
  </div>
  <div class="full-view">
    <img id="main-photo" src="placeholder.jpg">
    <div class="controls">
      <button id="prev-btn">Previous</button>
      <button id="next-btn">Next</button>
    </div>
  </div>
</div>

CSS样式

.photo-gallery {
  display: flex;
  gap: 20px;
}
.thumbnails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.thumbnails img {
  width: 100%;
  cursor: pointer;
  transition: transform 0.2s;
}
.thumbnails img:hover {
  transform: scale(1.05);
}
.full-view {
  flex-grow: 1;
}
#main-photo {
  max-width: 100%;
  max-height: 80vh;
}
.controls {
  margin-top: 10px;
}

JavaScript逻辑

document.addEventListener('DOMContentLoaded', function() {
  const thumbnails = document.querySelectorAll('.thumbnails img');
  const mainPhoto = document.getElementById('main-photo');
  const prevBtn = document.getElementById('prev-btn');
  const nextBtn = document.getElementById('next-btn');
  let currentIndex = 0;

  // 缩略图点击事件
  thumbnails.forEach((thumb, index) => {
    thumb.addEventListener('click', () => {
      currentIndex = index;
      updateMainPhoto();
    });
  });

  // 更新主图显示
  function updateMainPhoto() {
    mainPhoto.src = thumbnails[currentIndex].dataset.full;
    thumbnails.forEach(thumb => thumb.classList.remove('active'));
    thumbnails[currentIndex].classList.add('active');
  }

  // 导航按钮
  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
    updateMainPhoto();
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % thumbnails.length;
    updateMainPhoto();
  });

  // 初始化
  updateMainPhoto();
});

增强功能实现

对于更复杂的相册功能，可以考虑以下扩展：

图片懒加载

const lazyLoad = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      lazyLoad.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  lazyLoad.observe(img);
});

图片预加载

function preloadImages() {
  thumbnails.forEach(thumb => {
    const img = new Image();
    img.src = thumb.dataset.full;
  });
}

响应式布局调整

function adjustLayout() {
  if (window.innerWidth < 768) {
    document.querySelector('.photo-gallery').style.flexDirection = 'column';
  } else {
    document.querySelector('.photo-gallery').style.flexDirection = 'row';
  }
}

window.addEventListener('resize', adjustLayout);
adjustLayout();

第三方库方案

对于更专业的实现，可以考虑使用现有库：

PhotoSwipe

import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

const pswp = document.querySelector('.pswp');
const items = [
  {
    src: 'image1.jpg',
    w: 1200,
    h: 800
  },
  {
    src: 'image2.jpg',
    w: 1600,
    h: 900
  }
];

document.querySelectorAll('.gallery-item').forEach((item, index) => {
  item.addEventListener('click', () => {
    const gallery = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, {index});
    gallery.init();
  });
});

Lightbox2

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

<a href="image1.jpg" data-lightbox="gallery" data-title="Image 1">
  <img src="thumb1.jpg" alt="">
</a>

这些实现方案可以根据具体需求进行组合和扩展，构建出功能完善的相册应用。