希米日志
预览：
代码：
- 可微调JS中配置修改预览效果
<!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>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f2f5; /* 浅灰色背景 */
color: #333;
overflow-x: hidden; /* 隐藏横向滚动条，避免布局溢出 */
}
h1 {
text-align: center;
color: #34495e;
margin: 40px 0;
font-size: 2.8em;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* 照片墙容器 */
.photo-wall-container {
position: relative; /* 允许内部元素绝对定位 */
width: 90%; /* 根据需要调整宽度 */
max-width: 1400px; /* 限制最大宽度 */
margin: 0 auto; /* 居中显示 */
/* min-height 需要足够高以容纳随机排布的图片，初始可设定一个较大值 */
min-height: 1000px; /* 设定一个足够大的最小高度，将由JS动态调整 */
background-color: transparent; /* 背景透明 */
padding-bottom: 50px; /* 底部留白 */
}
/* 单个照片项 */
.photo-item {
position: absolute; /* 绝对定位，实现自由排布和重叠 */
background-color: #ffffff; /* 相框颜色 */
padding: 8px; /* 相框内边距 */
border: 1px solid #ddd; /* 边框 */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 阴影效果 */
transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s ease 0.3s; /* 过渡效果 */
cursor: pointer;
border-radius: 4px; /* 轻微圆角 */
overflow: hidden; /* 确保图片不会溢出相框 */
box-sizing: border-box; /* 边框和内边距包含在尺寸内 */
z-index: 1; /* 默认层级 */
}
.photo-item:hover {
transform: scale(1.05) rotate(0deg) !important; /* 鼠标悬停时放大，且取消旋转 */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* 更明显的阴影 */
z-index: 10; /* 悬停时提到最上层 */
}
.photo-item img {
width: 100%;
height: 100%; /* 让图片填充整个 photo-item */
object-fit: cover; /* 裁剪图片以填充容器，保持宽高比 */
display: block; /* 移除图片底部空白 */
}
.photo-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
color: white;
padding: 15px 10px 5px;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.3s ease;
text-align: center;
}
.photo-item:hover .photo-info {
opacity: 1; /* 悬停时显示信息 */
}
.photo-title {
font-size: 1.1em;
margin: 0 0 5px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-category {
font-size: 0.75em;
background-color: rgba(255, 255, 255, 0.2);
padding: 3px 8px;
border-radius: 3px;
display: inline-block;
}
/* 媒体查询：响应式调整 */
@media (max-width: 768px) {
h1 {
font-size: 2.2em;
}
.photo-wall-container {
width: 100%;
padding: 10px;
min-height: auto; /* 手机端不再依赖固定最小高度，由内容撑开 */
height: auto; /* 确保在小屏幕下能自适应高度 */
margin: 0; /* 手机端取消左右外边距 */
}
.photo-item {
position: relative; /* 在小屏幕上改为相对定位，堆叠显示 */
width: 95% !important; /* 让每个图片占据大部分宽度 */
height: auto !important; /* 高度自适应 */
margin: 10px auto; /* 居中并有间隔 */
transform: none !important; /* 移除旋转 */
left: auto !important;
top: auto !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.photo-item:hover {
transform: scale(1.02) !important; /* 手机端悬停效果 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.photo-item img {
height: 200px; /* 手机端固定图片高度 */
}
.photo-info {
opacity: 1; /* 手机端始终显示信息 */
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
}
.photo-title {
font-size: 1em;
}
.photo-category {
font-size: 0.7em;
}
}
</style>
</head>
<body>
<h1>捕捉瞬间，定格美好</h1>
<div class="photo-wall-container" id="photoWall">
<div class="photo-item">
<a href="https://img.ximi.me/user/Anime" target="_blank">
<img src="https://img.ximi.me/user/Anime/!!min_1751100396_685fabec948a1.webp" alt="动漫1">
</a>
<div class="photo-info">
<h3 class="photo-title">动漫1</h3>
<span class="photo-category">壁纸</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/Animes" target="_blank">
<img src="https://img.ximi.me/user/Animes/!!min_1751956089_686cba79be5f0.png" alt="动漫2">
</a>
<div class="photo-info">
<h3 class="photo-title">动漫2</h3>
<span class="photo-category">壁纸</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/ai" target="_blank">
<img src="https://img.ximi.me/user/ai/!!min_1751954645_686cb4d5f3089.png" alt="Ai美图">
</a>
<div class="photo-info">
<h3 class="photo-title">Ai美图</h3>
<span class="photo-category">壁纸</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/aibzq" target="_blank">
<img src="https://img.ximi.me/user/aibzq/!!min_1751955523_686cb843168da.webp" alt="报纸女孩">
</a>
<div class="photo-info">
<h3 class="photo-title">报纸女孩</h3>
<span class="photo-category">壁纸</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/bnt" target="_blank">
<img src="https://img.ximi.me/user/bnt/!!min_32c47f7e.jpg" alt="拜年兔">
</a>
<div class="photo-info">
<h3 class="photo-title">拜年兔</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/cat" target="_blank">
<img src="https://img.ximi.me/user/cat/!!min_1751956296_686cbb4860905.png" alt="卡通">
</a>
<div class="photo-info">
<h3 class="photo-title">卡通</h3>
<span class="photo-category">萌宠</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/cheng" target="_blank">
<img src="https://img.ximi.me/user/cheng/!!min_890e02f5.jpg" alt="城">
</a>
<div class="photo-info">
<h3 class="photo-title">城</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/hjj" target="_blank">
<img src="https://img.ximi.me/user/hjj/!!min_97516985.jpeg" alt="花间集">
</a>
<div class="photo-info">
<h3 class="photo-title">花间集</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/htx" target="_blank">
<img src="https://img.ximi.me/user/htx/!!min_4ee1db92.jpg" alt="海棠仙">
</a>
<div class="photo-info">
<h3 class="photo-title">海棠仙</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/huaye" target="_blank">
<img src="https://img.ximi.me/user/huaye/!!min_703d4abd.jpg" alt="花野">
</a>
<div class="photo-info">
<h3 class="photo-title">花野</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/mcdw" target="_blank">
<img src="https://img.ximi.me/user/mcdw/!!min_5d75bff7a45e4.jpg" alt="萌宠动物">
</a>
<div class="photo-info">
<h3 class="photo-title">萌宠动物</h3>
<span class="photo-category">萌宠</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/mengchong" target="_blank">
<img src="https://img.ximi.me/user/mengchong/!!min_1751964177_686cda116a3c7.jpg" alt="萌宠">
</a>
<div class="photo-info">
<h3 class="photo-title">萌宠</h3>
<span class="photo-category">萌宠</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/mnmt" target="_blank">
<img src="https://img.ximi.me/user/mnmt/!!min_346a85548ea751cdaf6fc959bc30fc2a.jpg" alt="美女模特">
</a>
<div class="photo-info">
<h3 class="photo-title">美女模特</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/mousi" target="_blank">
<img src="https://img.ximi.me/user/mousi/!!min_ff277b8a.jpg" alt="缪斯">
</a>
<div class="photo-info">
<h3 class="photo-title">缪斯</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/mxfs" target="_blank">
<img src="https://img.ximi.me/user/mxfs/!!min_5d7ed13961c89b03f87c822dc100a2ac--4275410534.jpg" alt="明星风尚">
</a>
<div class="photo-info">
<h3 class="photo-title">明星风尚</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/qsj" target="_blank">
<img src="https://img.ximi.me/user/qsj/!!min_c261db95.jpg" alt="青丝诀">
</a>
<div class="photo-info">
<h3 class="photo-title">青丝诀</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/syr" target="_blank">
<img src="https://img.ximi.me/user/syr/!!min_3048cb5a.jpg" alt="三月榕">
</a>
<div class="photo-info">
<h3 class="photo-title">三月榕</h3>
<span class="photo-category">美图</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/ximi" target="_blank">
<img src="https://img.ximi.me/user/ximi/!!min_eaa51a97.jpg" alt="默认">
</a>
<div class="photo-info">
<h3 class="photo-title">默认</h3>
<span class="photo-category">Null</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/xqx" target="_blank">
<img src="https://img.ximi.me/user/xqx/!!min_774589499a34bd21ade7eec5edfbb135.jpg" alt="小清新">
</a>
<div class="photo-info">
<h3 class="photo-title">小清新</h3>
<span class="photo-category">Null</span>
</div>
</div>
<div class="photo-item">
<a href="https://img.ximi.me/user/yt" target="_blank">
<img src="https://img.ximi.me/user/yt/!!min_3e254eea.jpg" alt="玉兔">
</a>
<div class="photo-info">
<h3 class="photo-title">玉兔</h3>
<span class="photo-category">美图</span>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const photoWall = document.getElementById('photoWall');
const photoItems = document.querySelectorAll('.photo-item');
// 定义随机生成范围
const minWidth = 150;
const maxWidth = 280;
const minHeight = 120;
const maxHeight = 250;
const maxRotation = 8; // 最大旋转角度（正负）
const padding = 20; // 容器内边距，防止图片紧贴边缘
let maxBottom = 0; // 记录最底部的图片位置，用于调整容器高度
photoItems.forEach(item => {
// 随机尺寸
const width = Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth;
const height = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
item.style.width = `${width}px`;
item.style.height = `${height}px`;
// 随机旋转
const rotation = Math.floor(Math.random() * (2 * maxRotation + 1)) - maxRotation;
item.style.transform = `rotate(${rotation}deg)`;
// 随机位置 (确保在容器内部且有一定重叠)
// 获取容器的实时宽度，因为它是响应式的
const containerWidth = photoWall.clientWidth;
const containerHeight = photoWall.clientHeight; // 初始可能为0，但我们会更新
// 尝试在容器宽度内随机放置
// 确保left不超过容器宽度减去图片宽度
const left = Math.floor(Math.random() * (containerWidth - width - 2 * padding)) + padding;
// 假设墙面可以垂直扩展，top值可以根据图片数量和高度进行调整
// 这里我们让它们在一定范围内随机分布，并让后续的图片可以放置在更下方
const top = Math.floor(Math.random() * 600) + 20; // 随机顶部位置，从20px到620px
item.style.left = `${left}px`;
item.style.top = `${top}px`;
// 更新最底部的图片位置
const itemBottom = top + height + parseFloat(getComputedStyle(item).paddingTop) * 2 + parseFloat(getComputedStyle(item).borderWidth) * 2;
if (itemBottom > maxBottom) {
maxBottom = itemBottom;
}
});
// 根据所有图片的最大底部位置调整容器的最小高度
// 额外增加一些底部空间
photoWall.style.minHeight = `${maxBottom + 50}px`;
// 在窗口大小改变时重新计算和应用位置（如果需要更动态的响应式布局，这里可以优化）
window.addEventListener('resize', () => {
if (window.innerWidth > 768) { // 只在非手机模式下进行随机布局
// 重新运行布局函数或调整相关参数
// 为了避免每次resize都完全重新随机，可以考虑只在特定阈值或重新加载时随机
// 这里为了演示，每次resize都重新随机（可能会导致闪烁）
// 实际应用中，你可能需要一个更复杂的碰撞检测和布局算法，或固定几个布局点
// 简单粗暴的解决方法是刷新页面或者限制随机只发生一次
location.reload(); // 重新加载页面以应用新的随机布局
}
});
});
</script>
</body>
</html>
2025-07-26 12:15:13