一、系统架构设计

二、核心功能实现

1. 智能网格布局

.gallery {
    --min-column-width: 300px;
    --gap: 1rem;
    
    display: grid;
    grid-template-columns: repeat(
        auto-fill, 
        minmax(min(var(--min-column-width), 100%), 1fr)
    );
    gap: var(--gap);
    padding: var(--gap);
    
    @container (width = 1200px) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.gallery-item {
    aspect-ratio: 16/9;
    overflow: hidden;
    transition: transform 0.3s ease;
    
    &:hover {
        transform: scale(1.03);
        z-index: 1;
    }
}

2. 自适应图片处理

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    
    .gallery-item:hover & {
        transform: scale(1.1);
    }
}

/* 响应式图片处理 */

    

3. 高级滤镜效果

.gallery-item {
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top, 
            rgba(0,0,0,0.7) 0%, 
            transparent 50%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    &:hover::after {
        opacity: 1;
    }
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 2;
    
    .gallery-item:hover & {
        transform: translateY(0);
    }
}

三、高级功能实现

1. 容器查询布局

.gallery-container {
    container-type: inline-size;
    container-name: gallery;
}

/* 根据容器宽度调整布局 */
@container gallery (width = 500px) and (width < 800px) {
    .gallery {
        --min-column-width: 250px;
    }
}

2. 滚动驱动动画

.gallery-item {
    view-timeline: --item;
    animation: fade-in linear;
    animation-timeline: --item;
    animation-range: entry 25% cover 50%;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

四、实战案例演示

1. 完整HTML结构

<div class="gallery-container">
    <div class="gallery">
        <div class="gallery-item">
            <picture>
                <source media="(min-width: 1200px)" srcset="photo1-large.jpg">
                <img src="photo1-small.jpg" alt="Photo 1" class="gallery-image">
            </picture>
            <div class="gallery-caption">美丽的风景照片</div>
        </div>
        <!-- 更多画廊项目 -->
    </div>
</div>

2. 性能优化方案

• CSS will-change：优化动画性能
• 内容可见性：content-visibility加速渲染
• 图片懒加载：loading=”lazy”属性
• CSS变量：减少重复计算