js实现画廊

实现基础画廊布局

使用HTML和CSS创建基础的画廊容器结构。通过Flexbox或Grid布局实现响应式图片排列。

<div class="gallery">
  <img src="image1.jpg" alt="Gallery Image 1">
  <img src="image2.jpg" alt="Gallery Image 2">
  <img src="image3.jpg" alt="Gallery Image 3">
  <!-- 更多图片 -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.03);
}

添加图片点击放大功能

使用JavaScript实现点击图片显示全屏预览功能，并添加导航按钮。

document.querySelectorAll('.gallery img').forEach(img => {
  img.addEventListener('click', function() {
    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100vw';
    modal.style.height = '100vh';
    modal.style.backgroundColor = 'rgba(0,0,0,0.9)';
    modal.style.display = 'flex';
    modal.style.alignItems = 'center';
    modal.style.justifyContent = 'center';
    modal.style.zIndex = '1000';
    modal.style.cursor = 'pointer';

    const modalImg = document.createElement('img');
    modalImg.src = this.src;
    modalImg.style.maxHeight = '90vh';
    modalImg.style.maxWidth = '90vw';
    modalImg.style.objectFit = 'contain';

    modal.appendChild(modalImg);
    document.body.appendChild(modal);

    modal.addEventListener('click', () => {
      document.body.removeChild(modal);
    });
  });
});

实现图片懒加载

优化性能，当图片进入可视区域时才加载。

function lazyLoadImages() {
  const images = document.querySelectorAll('.gallery img[data-src]');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
        observer.unobserve(img);
      }
    });
  }, { threshold: 0.1 });

  images.forEach(img => observer.observe(img));
}

// 修改HTML，将src替换为data-src
// <img data-src="image1.jpg" alt="Gallery Image 1">

添加图片筛选功能

实现按类别筛选显示图片的功能。

// 为图片添加data-category属性
// <img src="image1.jpg" data-category="nature">

function setupFilterButtons() {
  const buttons = document.querySelectorAll('.filter-btn');
  const images = document.querySelectorAll('.gallery img');

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const category = btn.dataset.category;

      images.forEach(img => {
        if (category === 'all' || img.dataset.category === category) {
          img.style.display = 'block';
        } else {
          img.style.display = 'none';
        }
      });
    });
  });
}

实现滑动画廊效果

创建横向滑动的画廊展示，适合移动设备。

.scroll-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 10px;
}

.scroll-gallery img {
  scroll-snap-align: start;
  min-width: 80vw;
  height: 60vh;
  object-fit: cover;
}