当前位置：首页 > article >正文

单页响应式图片懒加载HTML页面

article 2025/3/22 23:53:39

设计说明

响应式设计：
- 使用CSS Grid布局，根据屏幕宽度自动调整色块数量
- 在不同设备上都有良好的显示效果
懒加载：
- 使用<img>标签的loading="lazy"属性实现原生懒加载
- 图片在滚动到视口附近时才会加载
色块展示：
- 使用随机生成的色块作为内容展示
- 每个色块都有独特的颜色和编号
- 色块有悬停效果和阴影效果
分类展示：
- 将色块分为自然风光、城市建筑和抽象艺术三类
- 每类都有独立的标题和网格布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式懒加载页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f4f4;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section {
            margin-bottom: 40px;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            font-size: 24px;
        }
        
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .color-block {
            aspect-ratio: 1;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .color-block:hover {
            transform: translateY(-5px);
        }
        
        .color-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .color-block-placeholder {
            width: 100%;
            height: 100%;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .color-grid {
                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            }
        }
        
        @media (max-width: 480px) {
            .color-grid {
                grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="section-title">响应式懒加载色块展示</h1>
        
        <div class="section">
            <h2 class="section-title">自然风光</h2>
            <div class="color-grid" id="nature-grid">
                <!-- 色块将通过JavaScript动态添加 -->
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">城市建筑</h2>
            <div class="color-grid" id="architecture-grid">
                <!-- 色块将通过JavaScript动态添加 -->
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">抽象艺术</h2>
            <div class="color-grid" id="art-grid">
                <!-- 色块将通过JavaScript动态添加 -->
            </div>
        </div>
    </div>

    <script>
        // 模拟图片数据
        const imageDatas = [
            { id: 1, color: '#FF5733', category: 'nature' },
            { id: 2, color: '#33FF57', category: 'nature' },
            { id: 3, color: '#3357FF', category: 'nature' },
            { id: 4, color: '#F3FF33', category: 'nature' },
            { id: 5, color: '#FF33F3', category: 'nature' },
            { id: 6, color: '#33FFF3', category: 'nature' },
            { id: 7, color: '#FF8C33', category: 'nature' },
            { id: 8, color: '#33FF8C', category: 'nature' },
            { id: 9, color: '#338CFF', category: 'nature' },
            { id: 10, color: '#8CFF33', category: 'nature' },
            { id: 11, color: '#FF338C', category: 'architecture' },
            { id: 12, color: '#338CFF', category: 'architecture' },
            { id: 13, color: '#8C33FF', category: 'architecture' },
            { id: 14, color: '#FF8C33', category: 'architecture' },
            { id: 15, color: '#33FF8C', category: 'architecture' },
            { id: 16, color: '#8CFF33', category: 'architecture' },
            { id: 17, color: '#33FF33', category: 'art' },
            { id: 18, color: '#FF3333', category: 'art' },
            { id: 19, color: '#3333FF', category: 'art' },
            { id: 20, color: '#FFFF33', category: 'art' },
            { id: 21, color: '#FF33FF', category: 'art' },
            { id: 22, color: '#33FFFF', category: 'art' },
            { id: 23, color: '#8C33FF', category: 'art' },
            { id: 24, color: '#FF8C33', category: 'art' },
            { id: 25, color: '#338CFF', category: 'art' },
            { id: 26, color: '#8CFF33', category: 'art' }
        ];

        // 创建色块元素
        function createColorBlock(item) {
            const block = document.createElement('div');
            block.className = 'color-block';
            block.style.backgroundColor = item.color;
            
            const img = document.createElement('img');
            img.src = `https://picsum.photos/seed/${item.id}/300/300`;
            img.alt = `色块 ${item.id}`;
            img.loading = 'lazy'; // 启用懒加载
            
            block.appendChild(img);
            
            return block;
        }

        // 初始化页面
        function initPage() {
            const grids = {
                'nature-grid': document.getElementById('nature-grid'),
                'architecture-grid': document.getElementById('architecture-grid'),
                'art-grid': document.getElementById('art-grid')
            };

            // 根据分类将色块添加到对应的网格中
            imageDatas.forEach(item => {
                const gridId = `${item.category}-grid`;
                const grid = grids[gridId];
                if (grid) {
                    const block = createColorBlock(item);
                    grid.appendChild(block);
                }
            });
        }

        // 页面加载完成后初始化
        window.addEventListener('load', initPage);
    </script>
</body>
</html>

查看全文

http://www.kler.cn/a/596013.html