Lkhsss/momo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

momo的首次提交！

Browse Source
This commit is contained in:
lkhsss
2025-06-13 22:40:00 +08:00
commit 0fcae66f54
14 changed files with 2469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
templates/NoResources.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Resources</title>
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>
No Resources We Can Show You
</h1>
</body>
</html>

263
templates/index.1.html Normal file
View File

@ -0,0 +1,263 @@
<!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;
padding: 20px;
background-color: #f5f5f5;
}
.waterfall-container {
position: relative;
margin: 0 auto;
min-height: 100vh;
}
.waterfall-item {
position: absolute;
width: calc(100% / var(--columns, 4) - 10px);
margin: 5px;
transition: all 0.3s ease;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
animation: fadeIn 0.5s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.waterfall-item img {
width: 100%;
display: block;
transition: opacity 0.3s ease;
}
.waterfall-item .img-placeholder {
width: 100%;
background-color: #eee;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.waterfall-item .content {
padding: 10px;
}
.loading {
text-align: center;
padding: 20px;
font-size: 18px;
color: #666;
}
img {
transition: all 0.5s;
}
img:hover {
transform: scale(1.1);
/*图片放大1.1倍*/
margin-top: 30px;
/*鼠标悬停时上移30px*/
/* margin-top: 0px;和hover的margin-top有对比，原无30,现在0，相当于上移了,30px */
box-shadow: 0 0 20px 2px #918f8f;
/*盒子阴影*/
transition: all 0.5s;
/*持续时间*/
}
</style>
</head>
<body>
<div class="waterfall-container" id="waterfall">
<div class="loading">加载中，请稍候...</div>
<!-- 示例结构 - 实际使用时可以动态生成 -->
{% for img in imgs %}
<div class="waterfall-item">
<div class="img-placeholder">
<img data-src={{img.path}}>
</div>
</div>
{% endfor %}
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const waterfallContainer = document.getElementById('waterfall');
let columnHeights = [];
let columnCount = 0;
let columnWidth = 0;
const gap = 10;
// 初始化瀑布流
async function initWaterfall() {
// 隐藏所有项目
const items = document.querySelectorAll('.waterfall-item');
items.forEach(item => item.style.display = 'none');
// 移除加载提示
const loading = document.querySelector('.loading');
if (loading) loading.remove();
// 计算列数
calculateColumns();
// 预加载所有图片并获取尺寸
await preloadImages();
// 定位所有项目
positionAllItems();
// 显示所有项目
items.forEach(item => item.style.display = 'block');
// 初始化懒加载
lazyLoadImages();
}
// 预加载图片并获取尺寸
function preloadImages() {
const images = document.querySelectorAll('.waterfall-item img[data-src]');
const promises = [];
images.forEach(img => {
const promise = new Promise((resolve) => {
const tempImg = new Image();
tempImg.src = img.dataset.src;
tempImg.onload = function () {
// 保存自然尺寸到数据集
img.dataset.naturalWidth = this.naturalWidth;
img.dataset.naturalHeight = this.naturalHeight;
resolve();
};
tempImg.onerror = function () {
// 加载失败时使用默认尺寸
img.dataset.naturalWidth = 800;
img.dataset.naturalHeight = 600;
resolve();
};
});
promises.push(promise);
});
return Promise.all(promises);
}
// 计算列数和列宽
function calculateColumns() {
const containerWidth = waterfallContainer.offsetWidth;
const minColumnWidth = 250;
columnCount = Math.max(1, Math.floor(containerWidth / minColumnWidth));
columnWidth = containerWidth / columnCount;
waterfallContainer.style.setProperty('--columns', columnCount);
columnHeights = new Array(columnCount).fill(0);
}
// 定位所有项目
function positionAllItems() {
columnHeights = new Array(columnCount).fill(0);
const items = document.querySelectorAll('.waterfall-item');
items.forEach(item => {
positionItem(item);
});
waterfallContainer.style.height = Math.max(...columnHeights) + 'px';
}
// 定位单个项目
function positionItem(itemElement) {
const img = itemElement.querySelector('img');
const width = parseInt(img.dataset.naturalWidth) || 800;
const height = parseInt(img.dataset.naturalHeight) || 600;
const aspectRatio = height / width;
const minHeight = Math.min(...columnHeights);
const columnIndex = columnHeights.indexOf(minHeight);
const left = columnIndex * columnWidth;
const top = minHeight;
const itemHeight = columnWidth * aspectRatio + 50; // 50是内容区域高度
columnHeights[columnIndex] += itemHeight + gap;
itemElement.style.left = `${left}px`;
itemElement.style.top = `${top}px`;
const placeholder = itemElement.querySelector('.img-placeholder');
placeholder.style.paddingBottom = `${aspectRatio * 100}%`;
}
// 懒加载图片（实际显示）
function lazyLoadImages() {
const lazyImages = document.querySelectorAll('.waterfall-item img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.onload = () => {
img.style.opacity = '1';
img.removeAttribute('data-src');
};
observer.unobserve(img);
}
});
}, {
rootMargin: '0px 0px 200px 0px'
});
lazyImages.forEach(img => observer.observe(img));
}
// 窗口大小改变时重新计算
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
calculateColumns();
positionAllItems();
}, 200);
});
// 初始化
initWaterfall();
// 模拟滚动加载更多数据
window.addEventListener('scroll', () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
console.log('加载更多数据...');
// 这里可以添加加载更多数据的逻辑
// 加载后需要再次调用 preloadImages() 和 positionAllItems()
}
});
});
</script>
</body>
</html>

203
templates/index.2.html Normal file
View File

@ -0,0 +1,203 @@
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momo</title>
<style>
.waterfall-container {
position: relative;
width: 100%;
}
.waterfall-item {
position: absolute;
width: calc(33.33% - 20px);
/* 三列布局，考虑间距 */
margin: 10px;
transition: all 0.3s ease;
}
.waterfall-item img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
/* 懒加载时的占位样式 */
.lazy {
background-color: #f5f5f5;
min-height: 200px;
/* 根据你的设计调整 */
}
img {
transition: all 0.5s;
}
img:hover {
transform: scale(1.3);
/*图片放大1.1倍*/
margin-top: 30px;
/*鼠标悬停时上移30px*/
margin-top: 0px;
box-shadow: 0 0 20px 2px #918f8f;
/*盒子阴影*/
transition: all 0.5s;
/*持续时间*/
}
.waterfall-item.loading {
opacity: 0.8;
}
/* 响应式调整 */
@media (min-width: 1200px) {
.waterfall-item {
width: calc(25% - 20px);
}
}
@media (max-width: 768px) {
.waterfall-item {
width: calc(50% - 200px);
/* 两列布局 */
}
}
@media (max-width: 480px) {
.waterfall-item {
width: calc(100% - 20px);
/* 单列布局 */
}
}
</style>
</head>
<body>
<div class="waterfall-container">
{% for img in imgs %}
<div class="waterfall-item">
<img class="lazy" data-src="{{img.path}}" alt="">
</div>
{% endfor %}
</div>
</body>
<script>
const column_width = {{column_width}};
function get_column_count(width) {
return parseInt(width/column_width)
}
// 使用防抖函数优化性能
function debounce(func, wait) {
let timeout;
return function () {
const context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
function layoutWaterfall() {
const container = document.querySelector('.waterfall-container');
const items = document.querySelectorAll('.waterfall-item:not(.loading)'); // 排除正在加载的项
const columnCount = get_column_count(window.innerWidth); // 响应式列数
// const columnCount = window.innerWidth < 768 ? 2 : 3; // 响应式列数
const gap = 20;
const containerWidth = container.offsetWidth;
const columnWidth = (containerWidth - gap * (columnCount - 1)) / columnCount;
const columnHeights = new Array(columnCount).fill(0);
items.forEach(item => {
item.style.width = `${columnWidth}px`;
const minHeight = Math.min(...columnHeights);
const columnIndex = columnHeights.indexOf(minHeight);
const left = columnIndex * (columnWidth + gap);
const top = minHeight;
item.style.left = `${left}px`;
item.style.top = `${top}px`;
columnHeights[columnIndex] += item.offsetHeight + gap;
});
container.style.height = `${Math.max(...columnHeights)}px`;
}
// 增强版的懒加载函数
function lazyLoadImages() {
const lazyImages = document.querySelectorAll('img.lazy');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const item = img.closest('.waterfall-item');
// 标记为正在加载
item.classList.add('loading');
// 创建新的Image对象预加载
const tempImg = new Image();
tempImg.src = img.dataset.src;
tempImg.onload = function () {
img.src = img.dataset.src;
img.classList.remove('lazy');
item.classList.remove('loading');
// 图片加载完成后重新布局
layoutWaterfall();
};
tempImg.onerror = function () {
item.classList.remove('loading');
// 可以在这里添加错误处理
};
observer.unobserve(img);
}
});
}, {
rootMargin: '200px 0px' // 提前200px开始加载
});
lazyImages.forEach(img => {
observer.observe(img);
});
}
// 初始化并添加事件监听
function initWaterfall() {
layoutWaterfall();
lazyLoadImages();
// 使用防抖函数优化resize性能
window.addEventListener('resize', debounce(() => {
layoutWaterfall();
}, 200));
// 监听DOM变化（如果有动态加载的内容）
const observer = new MutationObserver(debounce(() => {
layoutWaterfall();
lazyLoadImages();
}, 100));
observer.observe(document.body, {
subtree: true,
childList: true,
attributes: true
});
}
document.addEventListener('DOMContentLoaded', initWaterfall);
</script>
</html>