JavaScript網頁設計高級案例：構建交互式圖片畫廊

在現代Web開發中，交互式元素已成為提升用戶體驗的關鍵因素。本文將通過一個高級案例 - 構建交互式圖片畫廊，展示如何結合HTML和JavaScript創建引人入勝的網頁應用。這個案例不僅涵蓋了基礎的Web開發技術，還融入了性能優化和現代設計模式。

項目概述

我們將構建的交互式圖片畫廊具有以下功能：

響應式布局，適應不同設備尺寸
圖片類別篩選功能
點擊圖片展示大圖和詳細信息的模態框
平滑的動畫和過渡效果
懶加載技術提升性能
本地存儲保存用戶的設置偏好

HTML結構

首先，我們需要建立一個清晰的HTML結構作為應用的骨架：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交互式圖片畫廊</title><link rel="stylesheet" href="styles.css">
</head>
<body><header class="gallery-header"><h1>精美圖片畫廊</h1><div class="filter-container"><button class="filter-btn active" data-category="all">全部</button><button class="filter-btn" data-category="nature">自然風光</button><button class="filter-btn" data-category="architecture">建筑設計</button><button class="filter-btn" data-category="people">人物肖像</button></div></header><main class="gallery-container"><!-- 圖片項將通過JavaScript動態加載 --></main><!-- 模態框 --><div class="modal" id="imageModal"><span class="close-modal">&times;</span><div class="modal-content"><img class="modal-img" id="modalImage"><div class="image-info"><h3 id="imageTitle"></h3><p id="imageDescription"></p><p id="imageAuthor"></p></div></div></div><footer><p>? 2025 交互式圖片畫廊 | 設計與開發</p></footer><script src="gallery.js"></script>
</body>
</html>

JavaScript實現

現在，讓我們深入JavaScript部分，實現交互式功能：

// 圖片數據 - 使用公共鏈接
const galleryData = [{id: 1,src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",thumbnail: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=300&auto=format&fit=crop",title: "森林小徑",description: "陽光透過樹葉，灑在蜿蜒的森林小徑上",category: "nature",author: "張明"},{id: 2,src: "https://images.unsplash.com/photo-1486325212027-8081e485255e",thumbnail: "https://images.unsplash.com/photo-1486325212027-8081e485255e?w=400&h=300&auto=format&fit=crop",title: "現代建筑",description: "城市中心的現代玻璃建筑，反射著周圍的景色",category: "architecture",author: "李華"},{id: 3,src: "https://images.unsplash.com/photo-1533738363-b7f9aef128ce",thumbnail: "https://images.unsplash.com/photo-1533738363-b7f9aef128ce?w=400&h=300&auto=format&fit=crop",title: "街頭藝術家",description: "專注于表演的街頭藝術家，吸引了眾多觀眾",category: "people",author: "王芳"},{id: 4,src: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e",thumbnail: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=400&h=300&auto=format&fit=crop",title: "山間湖泊",description: "清澈的湖水倒映著周圍的群山和藍天",category: "nature",author: "陳曉"},{id: 5,src: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2",thumbnail: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2?w=400&h=300&auto=format&fit=crop",title: "歷史建筑",description: "古典風格的歷史建筑，展示著精美的建筑細節",category: "architecture",author: "趙建"},{id: 6,src: "https://images.unsplash.com/photo-1504439904031-93ded9f93e4e",thumbnail: "https://images.unsplash.com/photo-1504439904031-93ded9f93e4e?w=400&h=300&auto=format&fit=crop",title: "都市人像",description: "忙碌的都市生活中，一位沉思的年輕人",category: "people",author: "林美"}
];// DOM 元素
const galleryContainer = document.querySelector('.gallery-container');
const filterButtons = document.querySelectorAll('.filter-btn');
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const modalClose = document.querySelector('.close-modal');
const imageTitle = document.getElementById('imageTitle');
const imageDescription = document.getElementById('imageDescription');
const imageAuthor = document.getElementById('imageAuthor');// 當前選中的類別
let currentCategory = 'all';// 初始化函數
function initGallery() {// 加載用戶上次選擇的類別（如果有）const savedCategory = localStorage.getItem('preferredCategory');if (savedCategory) {currentCategory = savedCategory;// 更新按鈕狀態filterButtons.forEach(btn => {btn.classList.toggle('active', btn.getAttribute('data-category') === currentCategory);});} else {// 確保"全部"按鈕處于激活狀態filterButtons.forEach(btn => {btn.classList.toggle('active', btn.getAttribute('data-category') === 'all');});}// 加載圖片renderGallery();// 添加延遲加載后的動畫效果setTimeout(() => {animateGalleryItems();}, 100);// 添加事件監聽器setupEventListeners();
}// 渲染畫廊
function renderGallery() {// 清空畫廊容器galleryContainer.innerHTML = '';// 篩選圖片const filteredImages = currentCategory === 'all' ? galleryData : galleryData.filter(image => image.category === currentCategory);// 創建圖片元素filteredImages.forEach((image, index) => {const galleryItem = document.createElement('div');galleryItem.className = 'gallery-item';galleryItem.setAttribute('data-id', image.id);// 所有圖片都直接加載，不再使用懶加載// 這樣可以確保無論是初始加載還是切換類別，圖片都能顯示galleryItem.innerHTML = `<img class="gallery-img" src="${image.thumbnail}" alt="${image.title}"><div class="image-overlay"><h3>${image.title}</h3></div>`;galleryContainer.appendChild(galleryItem);});// 初始加載后立即添加動畫效果setTimeout(() => {animateGalleryItems();}, 50);
}// 實現懶加載implementLazyLoading();
}// 懶加載實現
function implementLazyLoading() {const lazyImages = document.querySelectorAll('img[data-src]');if ('IntersectionObserver' in window) {const imageObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.getAttribute('data-src');img.removeAttribute('data-src');// 添加加載完成的類img.classList.add('loaded');observer.unobserve(img);}});}, {// 修改閾值，使圖片在進入視口前就開始加載rootMargin: '50px',threshold: 0.1});lazyImages.forEach(img => {imageObserver.observe(img);});} else {// 降級處理：立即加載所有圖片lazyImages.forEach(img => {img.src = img.getAttribute('data-src');img.removeAttribute('data-src');img.classList.add('loaded');});}// 如果沒有圖片加載，可能是首次加載出現問題，強制加載第一屏圖片if (lazyImages.length === 0 || document.querySelectorAll('.gallery-item').length === 0) {console.log('強制重新渲染畫廊');setTimeout(() => renderGallery(), 100);}
}// 設置事件監聽器
function setupEventListeners() {// 篩選按鈕點擊事件filterButtons.forEach(button => {button.addEventListener('click', function() {const category = this.getAttribute('data-category');// 更新按鈕樣式filterButtons.forEach(btn => btn.classList.remove('active'));this.classList.add('active');// 更新當前類別并保存到本地存儲currentCategory = category;localStorage.setItem('preferredCategory', category);// 為畫廊添加轉場動畫類galleryContainer.classList.add('category-transition');// 短暫延遲后重新渲染畫廊，創造平滑過渡效果setTimeout(() => {// 重新渲染畫廊renderGallery();// 移除轉場類setTimeout(() => {galleryContainer.classList.remove('category-transition');}, 50);}, 300);});});// 圖片點擊事件（使用事件委托）galleryContainer.addEventListener('click', function(e) {const galleryItem = e.target.closest('.gallery-item');if (galleryItem) {const imageId = parseInt(galleryItem.getAttribute('data-id'));openModal(imageId);}});// 關閉模態框事件modalClose.addEventListener('click', closeModal);window.addEventListener('click', function(e) {if (e.target === modal) {closeModal();}});// 鍵盤事件處理window.addEventListener('keydown', function(e) {if (e.key === 'Escape' && modal.style.display === 'flex') {closeModal();}});
}// 打開模態框
function openModal(imageId) {const image = galleryData.find(img => img.id === imageId);if (image) {// 設置模態框內容modalImage.src = image.src;imageTitle.textContent = image.title;imageDescription.textContent = image.description;imageAuthor.textContent = `攝影師: ${image.author}`;// 顯示模態框并添加動畫效果modal.style.display = 'flex';setTimeout(() => {modal.classList.add('show');}, 10);// 防止滾動document.body.style.overflow = 'hidden';}
}// 關閉模態框
function closeModal() {modal.classList.remove('show');setTimeout(() => {modal.style.display = 'none';// 恢復滾動document.body.style.overflow = 'auto';// 清除圖片，減輕內存負擔modalImage.src = '';}, 300); // 匹配CSS過渡時間
}// 添加畫廊項目的動畫效果
function animateGalleryItems() {const items = document.querySelectorAll('.gallery-item');items.forEach((item, index) => {item.style.animationDelay = `${index * 0.05}s`;item.classList.add('animate');});
}// 添加響應式支持
function handleResponsive() {const checkWidth = () => {// 根據窗口寬度調整顯示樣式if (window.innerWidth < 768) {galleryContainer.classList.add('mobile-view');} else {galleryContainer.classList.remove('mobile-view');}};// 初始檢查checkWidth();// 窗口調整時檢查window.addEventListener('resize', checkWidth);
}// 性能優化：去抖動函數
function debounce(func, wait) {let timeout;return function() {const context = this;const args = arguments;clearTimeout(timeout);timeout = setTimeout(() => func.apply(context, args), wait);};
}// 優化后的窗口調整處理
window.addEventListener('resize', debounce(function() {// 調整畫廊布局const galleryItems = document.querySelectorAll('.gallery-item');// 根據視窗大小調整項目大小和布局if (window.innerWidth < 768) {galleryItems.forEach(item => {item.style.width = '100%';});} else if (window.innerWidth < 1024) {galleryItems.forEach(item => {item.style.width = 'calc(50% - 20px)';});} else {galleryItems.forEach(item => {item.style.width = 'calc(33.333% - 20px)';});}
}, 250));// 初始化畫廊
document.addEventListener('DOMContentLoaded', function() {// 立即初始化畫廊initGallery();handleResponsive();// 如果初次加載沒有顯示圖片，在短暫延遲后重試一次setTimeout(() => {if (document.querySelectorAll('.gallery-item').length === 0) {console.log('初始化重試');renderGallery();animateGalleryItems();}}, 500);
});

CSS樣式（核心部分）

雖然本文重點是JavaScript，但為了完整性，這里提供核心CSS樣式：

/* 基礎樣式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background-color: #f9f9f9;
}/* 畫廊容器樣式 */
.gallery-container {display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 1200px;margin: 2rem auto;padding: 0 20px;
}/* 畫廊項目樣式 */
.gallery-item {position: relative;width: calc(33.333% - 20px);margin-bottom: 30px;border-radius: 5px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);cursor: pointer;transition: transform 0.3s ease, box-shadow 0.3s ease;opacity: 0;transform: translateY(20px);
}.gallery-item.animate {animation: fadeIn 0.5s forwards;
}.gallery-item:hover {transform: translateY(-10px);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}/* 圖片樣式 */
.gallery-img {width: 100%;height: 250px;object-fit: cover;transition: transform 0.5s ease;
}.gallery-item:hover .gallery-img {transform: scale(1.1);
}/* 圖片疊加層 */
.image-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));padding: 15px;color: white;opacity: 0;transition: opacity 0.3s ease;
}.gallery-item:hover .image-overlay {opacity: 1;
}/* 篩選按鈕 */
.filter-container {text-align: center;margin: 2rem 0;
}.filter-btn {background: none;border: 2px solid #3498db;color: #3498db;padding: 8px 20px;margin: 0 5px;border-radius: 30px;cursor: pointer;font-weight: bold;transition: all 0.3s ease;
}.filter-btn.active, .filter-btn:hover {background-color: #3498db;color: white;
}/* 模態框樣式 */
.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);z-index: 1000;justify-content: center;align-items: center;opacity: 0;transition: opacity 0.3s ease;
}.modal.show {opacity: 1;
}.modal-content {display: flex;flex-direction: column;max-width: 900px;width: 90%;background-color: white;border-radius: 5px;overflow: hidden;box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);transform: scale(0.9);transition: transform 0.3s ease;
}.modal.show .modal-content {transform: scale(1);
}.modal-img {width: 100%;max-height: 70vh;object-fit: contain;
}.image-info {padding: 20px;
}.close-modal {position: absolute;top: 15px;right: 20px;color: white;font-size: 30px;cursor: pointer;z-index: 1001;
}/* 動畫 */
@keyframes fadeIn {to {opacity: 1;transform: translateY(0);}
}/* 類別切換過渡效果 */
.category-transition {opacity: 0.6;transition: opacity 0.3s ease;
}/* 響應式設計 */
@media (max-width: 1024px) {.gallery-item {width: calc(50% - 15px);}
}@media (max-width: 768px) {.gallery-item {width: 100%;}.modal-content {flex-direction: column;}.filter-container {display: flex;flex-wrap: wrap;justify-content: center;}.filter-btn {margin-bottom: 10px;}
}