js 实现画廊

实现基础画廊结构

使用HTML和CSS创建基础画廊布局，图片以网格形式排列。HTML部分包含一个容器和多个图片元素，CSS设置网格布局或Flexbox。

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

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 20px;
}
.gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
}

添加点击放大功能

通过JavaScript监听图片点击事件，创建模态框显示放大后的图片。

document.querySelectorAll('.gallery img').forEach(img => {
  img.addEventListener('click', () => {
    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.8)';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';
    modal.style.zIndex = '1000';

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

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

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

实现滑动切换功能

在模态框中添加导航按钮，允许用户切换上一张或下一张图片。

let currentIndex = 0;
const images = document.querySelectorAll('.gallery img');

function showModal(index) {
  const modal = document.createElement('div');
  modal.style.position = 'fixed';
  // ...模态框样式同上...

  const modalImg = document.createElement('img');
  modalImg.src = images[index].src;
  // ...图片样式同上...

  const prevBtn = document.createElement('button');
  prevBtn.textContent = '❮';
  prevBtn.style.position = 'absolute';
  prevBtn.style.left = '20px';
  prevBtn.style.fontSize = '2rem';
  prevBtn.style.backgroundColor = 'transparent';
  prevBtn.style.border = 'none';
  prevBtn.style.color = 'white';
  prevBtn.style.cursor = 'pointer';

  const nextBtn = document.createElement('button');
  nextBtn.textContent = '❯';
  nextBtn.style.position = 'absolute';
  nextBtn.style.right = '20px';
  // ...样式同上...

  prevBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    modalImg.src = images[currentIndex].src;
  });

  nextBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    currentIndex = (currentIndex + 1) % images.length;
    modalImg.src = images[currentIndex].src;
  });

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

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

images.forEach((img, index) => {
  img.addEventListener('click', () => {
    currentIndex = index;
    showModal(currentIndex);
  });
});

响应式布局优化

通过CSS媒体查询调整画廊在不同屏幕尺寸下的显示效果。

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

性能优化建议

• 使用懒加载技术延迟加载图片，减少初始页面负载。
• 为图片添加loading="lazy"属性：

  <img src="image1.jpg" alt="Image 1" loading="lazy">

• 压缩图片文件大小，确保加载速度。