QQ扫码进入快活林QQ群
您可以和群友畅聊，更有优惠码分享哦～
- 187
会员总数
- 2351
文章总数
- 148434
浏览总数
- 50
今日发布
- 353天
稳定运行
document.addEventListener('DOMContentLoaded', function() {
// 初始化瀑布流
const initMasonry = (container) => {
// 确保容器可见
if (container.offsetParent === null) return;
// 销毁旧实例
if (container.masonry) {
container.masonry.destroy();
}
// 图片完全加载后初始化
imagesLoaded(container, { background: true }, function() {
container.style.opacity = '1'; // 显示容器
container.masonry = new Masonry(container, {
itemSelector: '.zib-waterfall-item',
columnWidth: container.querySelector('.zib-waterfall-item'),
percentPosition: true,
transitionDuration: '0.4s',
stagger: 30,
initLayout: false // 禁用自动初始化
});
// 手动触发首次布局
setTimeout(() => {
container.masonry.layout();
container.masonry.once('layoutComplete', function() {
container.classList.add('masonry-initialized');
});
}, 100);
});
};
// 全站初始化
const initAllMasonry = () => {
document.querySelectorAll('.zib-waterfall-group').forEach(container => {
// 添加加载状态
container.style.opacity = '0';
container.style.transition = 'opacity 0.3s';
// 预加载图片
const loadImages = [];
container.querySelectorAll('img').forEach(img => {
if (!img.complete && !img.classList.contains('loaded')) {
loadImages.push(new Promise(resolve => {
img.onload = resolve;
img.onerror = resolve;
}));
}
});
// 等待所有图片加载
Promise.all(loadImages).then(() => {
initMasonry(container);
});
});
};
// 首次初始化
initAllMasonry();
// 智能事件监听
const masonryObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
const container = entry.target;
if (container.masonry) {
container.masonry.layout();
}
});
});
// 动态内容处理
const domObserver = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.addedNodes.length) {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.matches('.zib-waterfall-group')) {
initMasonry(node);
masonryObserver.observe(node, { attributes: true });
}
});
document.querySelectorAll('.zib-waterfall-group').forEach(container => {
if (container.masonry) {
container.masonry.reloadItems();
container.masonry.layout();
}
});
}
});
});
// 开始监听
domObserver.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ['style', 'class']
});
// 窗口事件
let resizeTimer;
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
document.querySelectorAll('.zib-waterfall-group').forEach(container => {
if (container.masonry) {
container.masonry.layout();
}
});
}, 300);
});
// 兼容处理延迟加载
document.addEventListener('lazyloaded', function(e) {
const container = e.target.closest('.zib-waterfall-group');
if (container && container.masonry) {
container.masonry.reloadItems();
container.masonry.layout();
}
});
document.addEventListener('click', function(e) {
const adLink = e.target.closest('.zib-ad-link');
if (!adLink) return;
e.stopImmediatePropagation();
e.preventDefault();
if (adLink.dataset.adId) {
// 使用navigator.sendBeacon提高统计可靠性
const formData = new URLSearchParams();
formData.append('action', 'zib_waterfall_track_click');
formData.append('nonce', zib_waterfall_ajax.nonce);
formData.append('ad_id', adLink.dataset.adId);
navigator.sendBeacon(zib_waterfall_ajax.ajax_url, formData);
}
window.open(adLink.href, '_blank');
}, true);
});
