单页响应式 图片懒加载HTML页面
设计说明
-
响应式设计：
-
使用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>