做一个简单的仿网盘前端页面，实现文件以列表模式和缩略图模式切换功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>列表/缩略图模式切换</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.container {
max-width: 1450px;
margin: 30px auto;
padding: 0 20px;
}
/* 切换按钮 */
.view-switch {
margin-bottom: 20px;
display: flex;
gap: 10px;
}
.view-switch button {
padding: 8px 16px;
border: 1px solid #ddd;
background: #fff;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
}
.view-switch button.active {
background: #409eff;
color: #fff;
border-color: #409eff;
}
/* 列表表格 */
.file-list {
width: 100%;
border-collapse: collapse;
}
.file-list th,
.file-list td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.file-list th {
background: #f5f7fa;
font-weight: 600;
}
/* 缩略图容器 */
.file-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 每行5个 */
gap: 15px;
}
/* 隐藏样式 */
.grid-hide {
display: none !important;
}
.grid-item {
border: 1px solid #eee;
border-radius: 8px;
padding: 12px;
transition: 0.2s;
}
.grid-item:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
/* 图片容器 */
.img-box {
width: 100%;
aspect-ratio: 16/9;
/* 固定比例 */
overflow: hidden;
border-radius: 4px;
margin-bottom: 8px;
}
.img-box img {
width: 100%;
height: 100%;
object-fit: cover;
/* 填满容器 */
}
.grid-info {
font-size: 12px;
line-height: 1.5;
}
.grid-info p {
color: #666;
margin: 2px 0;
}
.grid-info strong {
display: block;
margin-bottom: 5px;
color: #333;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<div class="view-switch">
<button class="active" data-view="list">列表模式</button>
<button data-view="grid">缩略图模式</button>
</div>
<table class="file-list" id="fileList">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>类型</th>
<th>修改日期</th>
</tr>
</thead>
<tbody id="listBody"></tbody>
</table>
<div class="file-grid grid-hide" id="fileGrid"></div>
</div>
<script>
$(function() {
const fileData = [{
name: "风景图.jpg",
size: "2.4MB",
type: "图片",
date: "2015-01-15",
url: "https://picsum.photos/300/200?random=1",
resolution: "1920×1080"
},
{
name: "文档.pdf",
size: "850KB",
type: "PDF",
date: "2015-01-10",
url: "https://picsum.photos/300/200?random=2",
resolution: "-"
},
{
name: "设计稿.png",
size: "5.1MB",
type: "图片",
date: "2015-01-05",
url: "https://picsum.photos/300/200?random=3",
resolution: "2560×1440"
},
{
name: "演示文稿.pptx",
size: "12.8MB",
type: "PPT",
date: "2015-12-28",
url: "https://picsum.photos/300/200?random=4",
resolution: "-"
},
{
name: "照片.png",
size: "3.7MB",
type: "图片",
date: "2015-12-20",
url: "https://picsum.photos/300/200?random=5",
resolution: "1280×720"
},
{
name: "截图.jpg",
size: "1.2MB",
type: "图片",
date: "2015-12-18",
url: "https://picsum.photos/300/200?random=6",
resolution: "800×600"
},
{
name: "壁纸.jpg",
size: "4.2MB",
type: "图片",
date: "2015-12-10",
url: "https://picsum.photos/300/200?random=7",
resolution: "3840×2160"
}
];
function renderList() {
let html = '';
fileData.forEach(item => {
html +=
`<tr><td>${item.name}</td><td>${item.size}</td><td>${item.type}</td><td>${item.date}</td></tr>`;
})
$("#listBody").html(html);
}
function renderGrid() {
let html = '';
fileData.forEach(item => {
html += `
<div class="grid-item">
<div class="img-box">
<img src="${item.url}" alt="${item.name}">
</div>
<div class="grid-info">
<strong>${item.name}</strong>
<p>大小：${item.size}</p>
<p>类型：${item.type}</p>
<p>日期：${item.date}</p>
<p>分辨率：${item.resolution}</p>
</div>
</div>
`
})
$("#fileGrid").html(html);
}
renderList();
renderGrid();
// 切换视图
$("[data-view]").click(function() {
$(this).addClass('active').siblings().removeClass('active');
let v = $(this).data('view');
if (v == 'list') {
$('#fileList').show();
$('#fileGrid').addClass('grid-hide');
} else {
$('#fileList').hide();
$('#fileGrid').removeClass('grid-hide');
}
})
})
</script>
</body>
</html>本站原创内容，转载请注明来源：https://www.liutonghui.com/114
评论列表（0条）
暂无评论