203 lines
4.4 KiB
HTML
203 lines
4.4 KiB
HTML
<!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> |