js 实现画廊

使用CSS Grid实现基础画廊布局

通过CSS Grid可以快速创建响应式画廊布局，以下是一个基础实现方案：

<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(250px, 1fr));
  gap: 16px;
  padding: 16px;
}

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

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

添加Lightbox图片预览功能

实现点击图片放大预览的交互效果：

document.querySelectorAll('.gallery img').forEach(img => {
  img.addEventListener('click', function() {
    const lightbox = document.createElement('div');
    lightbox.id = 'lightbox';
    document.body.appendChild(lightbox);

    const enlargedImg = document.createElement('img');
    enlargedImg.src = this.src;
    lightbox.appendChild(enlargedImg);

    lightbox.addEventListener('click', e => {
      if (e.target !== enlargedImg) {
        lightbox.remove();
      }
    });
  });
});

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
}

实现图片懒加载优化性能

对于包含大量图片的画廊，懒加载可以显著提升页面性能：

const lazyImages = document.querySelectorAll('.gallery img[data-src]');

const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.onload = () => img.removeAttribute('data-src');
        observer.disconnect();
      }
    });
  });

  io.observe(target);
};

lazyImages.forEach(lazyLoad);

HTML需要相应调整：

<img data-src="image1.jpg" alt="Image 1">

添加图片分类过滤功能

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

const filterButtons = document.querySelectorAll('.filter-btn');
const galleryItems = document.querySelectorAll('.gallery-item');

filterButtons.forEach(button => {
  button.addEventListener('click', () => {
    const filterValue = button.dataset.filter;

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

HTML结构示例：

<div class="filter-controls">
  <button class="filter-btn" data-filter="all">All</button>
  <button class="filter-btn" data-filter="nature">Nature</button>
  <button class="filter-btn" data-filter="urban">Urban</button>
</div>

<div class="gallery">
  <div class="gallery-item" data-category="nature">
    <img src="nature1.jpg" alt="Nature">
  </div>
  <!-- 更多项目 -->
</div>

实现无限滚动加载更多

当用户滚动到页面底部时自动加载更多图片：

let isLoading = false;
let page = 1;

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500 && !isLoading) {
    isLoading = true;
    page++;
    loadMoreImages(page);
  }
});

async function loadMoreImages(pageNum) {
  try {
    const response = await fetch(`/api/images?page=${pageNum}`);
    const newImages = await response.json();

    newImages.forEach(img => {
      const imgElement = document.createElement('img');
      imgElement.src = img.url;
      document.querySelector('.gallery').appendChild(imgElement);
    });
  } catch (error) {
    console.error('Error loading more images:', error);
  } finally {
    isLoading = false;
  }
}

添加图片排序功能

允许用户按不同条件排序图片：

const sortSelect = document.getElementById('sort-by');

sortSelect.addEventListener('change', () => {
  const gallery = document.querySelector('.gallery');
  const items = Array.from(gallery.children);

  items.sort((a, b) => {
    const valueA = a.dataset[sortSelect.value];
    const valueB = b.dataset[sortSelect.value];

    if (sortSelect.value === 'date') {
      return new Date(valueA) - new Date(valueB);
    } else {
      return valueA.localeCompare(valueB);
    }
  });

  items.forEach(item => gallery.appendChild(item));
});

HTML结构：

<select id="sort-by">
  <option value="date">By Date</option>
  <option value="title">By Title</option>
</select>