纯CSS与JavaScript创建响应式图片画廊 | 前端开发教程

介绍

在现代网页设计中，图片画廊是展示作品集、产品图片或照片的常见方式。一个优秀的图片画廊不仅需要美观的布局，还需要良好的响应式设计和用户交互体验。

本教程将指导您创建一个无需任何外部库或框架的响应式图片画廊，使用纯CSS和少量JavaScript实现核心功能。

规划HTML结构

首先，我们需要构建一个语义化的HTML结构作为画廊的基础：

<div class="gallery-container">
    <div class="gallery">
        <div class="gallery-item">
            <img src="image1.jpg" alt="描述文本" data-full="image1-full.jpg">
            <div class="caption">图片标题1</div>
        </div>
        <div class="gallery-item">
            <img src="image2.jpg" alt="描述文本" data-full="image2-full.jpg">
            <div class="caption">图片标题2</div>
        </div>
        <!-- 更多图片项 -->
    </div>
</div>

<div class="lightbox" id="lightbox">
    <div class="lightbox-content">
        <span class="close">×</span>
        <img class="lightbox-image" src="" alt="">
        <div class="lightbox-caption"></div>
    </div>
</div>

我们使用data-full属性存储高分辨率图片的路径，以便在灯箱中显示。

CSS样式设计

接下来，使用CSS Grid布局创建响应式画廊：

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

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
}

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

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.gallery-item:hover img {
    opacity: 0.9;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .caption {
    transform: translateY(0);
}

/* 灯箱样式 */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
}

.lightbox-caption {
    color: white;
    text-align: center;
    padding: 10px;
}

.close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 36px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    
    .gallery-item img {
        height: 150px;
    }
}

这段CSS代码创建了一个响应式网格布局，并在移动设备上调整了列数和图片高度。

添加交互功能

使用JavaScript实现灯箱功能：

document.addEventListener('DOMContentLoaded', function() {
    const galleryItems = document.querySelectorAll('.gallery-item');
    const lightbox = document.getElementById('lightbox');
    const lightboxImage = document.querySelector('.lightbox-image');
    const lightboxCaption = document.querySelector('.lightbox-caption');
    const closeBtn = document.querySelector('.close');
    
    // 为每个画廊项添加点击事件
    galleryItems.forEach(item => {
        item.addEventListener('click', function() {
            const img = this.querySelector('img');
            const fullSizeSrc = img.getAttribute('data-full');
            const caption = this.querySelector('.caption').textContent;
            
            lightboxImage.setAttribute('src', fullSizeSrc);
            lightboxImage.setAttribute('alt', img.getAttribute('alt'));
            lightboxCaption.textContent = caption;
            
            lightbox.style.display = 'flex';
        });
    });
    
    // 关闭灯箱
    closeBtn.addEventListener('click', function() {
        lightbox.style.display = 'none';
    });
    
    // 点击灯箱背景关闭
    lightbox.addEventListener('click', function(e) {
        if (e.target === lightbox) {
            lightbox.style.display = 'none';
        }
    });
    
    // 添加键盘支持
    document.addEventListener('keydown', function(e) {
        if (lightbox.style.display === 'flex') {
            if (e.key === 'Escape') {
                lightbox.style.display = 'none';
            }
        }
    });
});

这段JavaScript代码实现了：