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

关于电商商品卡片布局的代码详细解析

news 2025/11/10 12:50:43

1. 文档声明与根元素

html

预览

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN"> <!-- HTML 根元素，lang="zh-CN" 表示页面语言为简体中文 -->

2. 头部（head）

html

预览

<head><meta charset="UTF-8"> <!-- 字符编码为 UTF-8，支持中文等多语言 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式视口配置：宽度等于设备宽度，初始缩放1.0 --><title>电商商品卡片布局</title> <!-- 页面标题，显示在浏览器标签页 --><!-- 引入外部资源 --><script src="https://cdn.tailwindcss.com"></script> <!-- 引入 Tailwind CSS 核心库（CDN 方式） --><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- 引入 Font Awesome 图标库 --><!-- Tailwind 配置（自定义主题） --><script>tailwind.config = {theme: {extend: { // 扩展默认主题（不覆盖原有配置）colors: { // 自定义颜色primary: '#3B82F6', // 主色调（蓝色），可通过 text-primary、bg-primary 等类使用secondary: '#10B981', // 辅助色（绿色）neutral: { // 中性色系列（100最浅，900最深）100: '#F3F4F6', // 浅灰背景200: '#E5E7EB', // 稍深灰300: '#D1D5DB', // 边框灰700: '#374151', // 次要文字800: '#1F2937', // 主要文字900: '#111827'  // 最深灰（近黑）}},fontFamily: { // 自定义字体inter: ['Inter', 'system-ui', 'sans-serif'], // 优先使用 Inter 字体， fallback 到系统字体},}}}</script><!-- 自定义 Tailwind 工具类 --><style type="text/tailwindcss">@layer utilities { /* 声明工具类层，Tailwind 会处理为全局样式 */.content-auto {content-visibility: auto; /* 优化内容渲染性能，只渲染可视区域内容 */}.card-shadow { /* 卡片默认阴影 */box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);}.card-shadow-hover { /* 卡片 hover 时的阴影（更深更大） */box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}}</style>
</head>

3. 身体（body）与页面结构

html

预览

<body class="bg-neutral-100 font-inter text-neutral-800"> <!-- 全局样式：浅灰背景、Inter 字体、深灰文字 --><!-- 页面头部（导航栏） --><header class="bg-white shadow-sm sticky top-0 z-10"> <!-- 白色背景、轻微阴影、粘性定位（滚动时固定顶部）、层级10（避免被覆盖） --><div class="container mx-auto px-4 py-4 flex justify-between items-center"> <!-- 响应式容器（居中）、内边距、Flex布局（左右分布+垂直居中） --><h1 class="text-2xl font-bold text-primary"> <!-- 标题：2倍大字体、加粗、主色调 --><i class="fa fa-shopping-bag mr-2"></i>ShopCards <!-- 购物袋图标 + 文字，图标右间距2单位 --></h1><div class="flex items-center space-x-4"> <!-- 右侧图标组：Flex布局、垂直居中、项目间距4单位 --><!-- 搜索按钮：内边距2单位、hover浅灰背景、圆形、颜色过渡动画 --><button class="p-2 hover:bg-neutral-100 rounded-full transition-colors"><i class="fa fa-search text-neutral-700"></i> <!-- 搜索图标，中性色700 --></button><!-- 购物车按钮（样式同上） --><button class="p-2 hover:bg-neutral-100 rounded-full transition-colors"><i class="fa fa-shopping-cart text-neutral-700"></i></button><!-- 用户按钮（样式同上） --><button class="p-2 hover:bg-neutral-100 rounded-full transition-colors"><i class="fa fa-user text-neutral-700"></i></button></div></div></header><!-- 主要内容区 --><main class="container mx-auto px-4 py-8"> <!-- 响应式容器、内边距（上下8单位，左右4单位） --><div class="mb-8"> <!-- 标题区域：底部外边距8单位 --><!-- 主标题：动态字体（最小1.5rem，最大2.5rem，随屏幕宽度变化）、加粗、最深灰文字 --><h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-900">热门商品</h2><p class="text-neutral-700 mt-2">发现我们精选的优质商品</p> <!-- 副标题：中性色700、顶部间距2单位 --></div><!-- 卡片网格容器：响应式网格（默认1列，sm屏幕2列，md3列，lg4列）、项目间距6单位 --><div id="card-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"><!-- 卡片将通过 JavaScript 动态生成 --></div><!-- 加载指示器：Flex居中、内边距8单位、默认隐藏 --><div id="loading" class="flex justify-center items-center py-8 hidden"><!-- 旋转动画：圆形、12单位大小、上下边框为主色调 --><div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div></div></main><!-- 页脚 --><footer class="bg-neutral-800 text-white py-12 mt-16"> <!-- 深灰背景、白色文字、上下内边距12单位、顶部外边距16单位 --><div class="container mx-auto px-4"> <!-- 响应式容器 --><!-- 页脚网格：默认1列，md屏幕4列，项目间距8单位 --><div class="grid grid-cols-1 md:grid-cols-4 gap-8"><!-- 品牌信息 --><div><h3 class="text-xl font-bold mb-4">ShopCards</h3> <!-- 1.5倍字体、加粗、底部间距4单位 --><p class="text-neutral-300">精选优质商品，给您最好的购物体验</p> <!-- 浅灰文字（中性色300） --></div><!-- 快速链接 --><div><h4 class="font-bold mb-4">快速链接</h4><ul class="space-y-2 text-neutral-300"> <!-- 列表项间距2单位、浅灰文字 --><!-- 链接：hover变白、颜色过渡 --><li><a href="#" class="hover:text-white transition-colors">首页</a></li><li><a href="#" class="hover:text-white transition-colors">商品分类</a></li><li><a href="#" class="hover:text-white transition-colors">关于我们</a></li><li><a href="#" class="hover:text-white transition-colors">联系我们</a></li></ul></div><!-- 帮助中心（结构同上） --><div><h4 class="font-bold mb-4">帮助中心</h4><ul class="space-y-2 text-neutral-300"><li><a href="#" class="hover:text-white transition-colors">购物指南</a></li><li><a href="#" class="hover:text-white transition-colors">支付方式</a></li><li><a href="#" class="hover:text-white transition-colors">配送信息</a></li><li><a href="#" class="hover:text-white transition-colors">退换政策</a></li></ul></div><!-- 社交媒体图标 --><div><h4 class="font-bold mb-4">关注我们</h4><div class="flex space-x-4"> <!-- Flex布局、项目间距4单位 --><!-- 图标链接：深灰背景、内边距2单位、圆形、hover主色调、颜色过渡 --><a href="#" class="bg-neutral-700 p-2 rounded-full hover:bg-primary transition-colors"><i class="fa fa-facebook"></i> <!-- Facebook图标 --></a><a href="#" class="bg-neutral-700 p-2 rounded-full hover:bg-primary transition-colors"><i class="fa fa-twitter"></i> <!-- Twitter图标 --></a><a href="#" class="bg-neutral-700 p-2 rounded-full hover:bg-primary transition-colors"><i class="fa fa-instagram"></i> <!-- Instagram图标 --></a><a href="#" class="bg-neutral-700 p-2 rounded-full hover:bg-primary transition-colors"><i class="fa fa-pinterest"></i> <!-- Pinterest图标 --></a></div></div></div><!-- 版权信息：上边框（中性色700）、顶部内外边距8单位、文字居中、浅灰文字（中性色400） --><div class="border-t border-neutral-700 mt-8 pt-8 text-center text-neutral-400"><p>&copy; 2025 ShopCards. 保留所有权利。</p></div></div></footer>

4. JavaScript 逻辑

html

预览

<script>// 商品分类数据const productCategories = ['电子产品', '服装鞋帽', '家居用品', '美妆个护', '食品饮料', '图书音像', '运动户外', '玩具乐器'];// 生成随机商品数据（参数：数量、起始索引）function generateProducts(count, startIndex = 0) {const products = [];for (let i = 0; i < count; i++) {const id = startIndex + i;const category = productCategories[Math.floor(Math.random() * productCategories.length)]; // 随机分类const price = (Math.random() * 900 + 100).toFixed(2); // 价格（100-1000元，保留2位小数）const rating = (Math.random() * 2 + 3).toFixed(1); // 评分（3-5星）const isNew = Math.random() > 0.7; // 30%概率为新品const isSale = Math.random() > 0.7; // 30%概率为促销products.push({id,name: `${category} 商品 ${id + 1}`,description: `这是一款优质的${category}，采用高品质材料制作，经久耐用，深受消费者喜爱。`,price,originalPrice: isSale ? (parseFloat(price) * 1.5).toFixed(2) : price, // 促销时原价为现价1.5倍rating,category,isNew,isSale});}return products;}// 全局变量：当前加载的商品数量、每次加载数量、是否正在加载let currentProductCount = 0;const productsPerLoad = 8;let isLoading = false;// 创建商品卡片（参数：商品数据）function createProductCard(product) {const card = document.createElement('div'); // 创建卡片容器// 卡片样式：白色背景、圆角、溢出隐藏、默认阴影、过渡动画（300ms）、hover时轻微放大+加深阴影card.className = 'bg-white rounded-lg overflow-hidden card-shadow transition-all duration-300 hover:scale-[1.02] hover:card-shadow-hover group';// 处理标签（新品/促销）const tags = [];if (product.isNew) tags.push('<span class="bg-primary text-white text-xs px-2 py-1 rounded">新品</span>');if (product.isSale) tags.push('<span class="bg-red-500 text-white text-xs px-2 py-1 rounded">促销</span>');// 卡片HTML内容card.innerHTML = `<div class="relative overflow-hidden"> <!-- 图片容器：相对定位、溢出隐藏 --><picture> <!-- 响应式图片（优先webp格式） --><source srcset="https://picsum.photos/seed/${product.id + 100}/400/300.webp" type="image/webp"><img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110" <!-- 图片：全屏宽、固定高、裁剪填充、hover时放大1.1倍（500ms过渡） -->loading="lazy" <!-- 懒加载（滚动到可视区域才加载） -->width="400" height="300"></picture></div>${tags.length > 0 ? `<div class="absolute top-2 left-2 flex gap-2">${tags.join('')}</div>` : ''} <!-- 标签容器：绝对定位（左上角）、Flex布局 --><button class="absolute top-2 right-2 bg-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"> <!-- 收藏按钮：绝对定位（右上角）、默认透明、group hover时显示 --><i class="fa fa-heart-o text-neutral-700 hover:text-red-500"></i> <!-- 心形图标，hover变红 --></button></div>          <div class="p-4"> <!-- 卡片内容区：内边距4单位 --><div class="flex items-center text-sm text-neutral-500 mb-1"> <!-- 分类+评分行：Flex居中、小字体、浅灰文字、底部间距1单位 --><span>${product.category}</span><span class="mx-2">|</span> <!-- 分隔符，左右间距2单位 --><div class="flex items-center"> <!-- 评分：星星图标+文字 --><i class="fa fa-star text-yellow-400 mr-1"></i> <!-- 黄色星星 --><span>${product.rating}</span></div></div><h3 class="font-semibold text-lg mb-2 line-clamp-1">${product.name}</h3> <!-- 商品名：半粗体、大字体、底部间距2单位、最多1行（超出省略） --><p class="text-neutral-600 text-sm mb-4 line-clamp-2">${product.description}</p> <!-- 描述：中性色600、小字体、底部间距4单位、最多2行 --><div class="flex items-center mb-4"> <!-- 价格区：Flex居中、底部间距4单位 --><span class="text-primary font-bold text-lg">¥${product.price}</span> <!-- 现价：主色调、加粗、大字体 -->${product.isSale ? `<span class="text-neutral-400 text-sm line-through ml-2">¥${product.originalPrice}</span>` : ''} <!-- 原价（促销时显示）：浅灰、小字体、删除线、左间距2单位 --></div><div class="flex gap-2"> <!-- 按钮区：Flex布局、间距2单位 --><button class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded transition-colors"> <!-- 加入购物车：占满剩余宽度、主色调背景、hover透明度90%、白色文字、内边距、圆角、颜色过渡 --><i class="fa fa-shopping-cart mr-1"></i> 加入购物车</button><button class="bg-neutral-100 hover:bg-neutral-200 p-2 rounded transition-colors"> <!-- 查看按钮：浅灰背景、hover稍深灰、内边距2单位、圆角、颜色过渡 --><i class="fa fa-eye text-neutral-700"></i></button></div></div>`;return card;}// 加载商品函数function loadProducts() {if (isLoading) return; // 如果正在加载，直接返回（避免重复请求）const maxProducts = 40; // 最大商品数量// 如果已加载数量≥最大数量，显示"已加载全部"if(currentProductCount>=maxProducts) {const loadingEl=document.getElementById('loading');loadingEl.innerHTML='<p class="text-neutral-700">已加载全部商品</p>';loadingEl.classList.remove('hidden');return;}const fragment=document.createDocumentFragment(); // 创建文档片段（优化DOM操作性能）isLoading = true; // 标记为正在加载document.getElementById('loading').classList.remove('hidden'); // 显示加载动画// 模拟网络请求延迟（1秒后加载）setTimeout(() => {const products = generateProducts(productsPerLoad, currentProductCount); // 生成商品数据const cardContainer = document.getElementById('card-container');// 遍历商品，创建卡片并添加到文档片段products.forEach(product => {const card = createProductCard(product);fragment.appendChild(card);});cardContainer.appendChild(fragment); // 一次性插入DOM（减少重绘）currentProductCount += productsPerLoad; // 更新已加载数量isLoading = false; // 标记为加载完成document.getElementById('loading').classList.add('hidden'); // 隐藏加载动画}, 1000);}// 初始加载商品loadProducts();// 无限滚动实现（监听滚动事件）let lastScrollTime=0;window.addEventListener('scroll', () => {const now = Date.now();if(now-lastScrollTime<200) return; // 节流：200ms内不重复执行（优化性能）lastScrollTime=now;// 当滚动到距离底部800px时，加载更多商品（且不在加载中）if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 800 && !isLoading) {loadProducts();}});
</script>
</body>
</html>