momo的首次提交！
This commit is contained in:
lkhsss
203
templates/index.2.html
Normal file
203
templates/index.2.html
Normal 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>
|
||||
Reference in New Issue
Block a user