设计说明
-
响应式设计：
-
使用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>
