js实现画廊

使用HTML和CSS创建基础结构

创建一个基础的HTML结构，包含一个容器和多个图片元素。CSS用于设置画廊的布局和样式。

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

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

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

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

添加JavaScript交互功能

通过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 = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0,0,0,0.8)';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    modal.style.zIndex = '1000';

    const modalImg = document.createElement('img');
    modalImg.src = this.src;
    modalImg.style.maxHeight = '80%';
    modalImg.style.maxWidth = '80%';

    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;
        observer.unobserve(img);
      }
    });
  });

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

// 修改HTML中的img标签
<img data-src="image1.jpg" alt="Image 1">

添加图片筛选功能

实现按类别筛选图片的功能，为图片添加数据属性进行分类。

function filterGallery(category) {
  const images = document.querySelectorAll('.gallery img');

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

// 修改HTML中的img标签
<img data-src="image1.jpg" data-category="nature" alt="Nature Image">

响应式设计调整

通过媒体查询确保画廊在不同屏幕尺寸下都能良好显示。

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 8px;
  }
}