修复布局更新问题

master
落雨楓 2 months ago
parent 6e6184f2b8
commit f0344822cb

@ -1,9 +1,38 @@
function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
let later = function () {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
func.apply(context, args);
}
};
}
$(function () { $(function () {
console.log('IsekaiWidgets: Masonry extension loaded'); let masonry = new isekai.lib.Masonry('.isekai-masonry', {
new isekai.lib.Masonry('.isekai-masonry', {
itemSelector: '.isekai-masonry-item', itemSelector: '.isekai-masonry-item',
columnWidth: '.isekai-masonry-sizer', columnWidth: '.isekai-masonry-sizer',
gutter: '.isekai-masonry-gutter-sizer', gutter: '.isekai-masonry-gutter-sizer',
percentPosition: true percentPosition: true
}); });
let resizeObserver = new ResizeObserver(debounce(function () {
console.log('masonry resize');
masonry.layout();
}, 100));
let items = document.querySelectorAll('.isekai-masonry-item');
items.forEach(function (item) {
resizeObserver.observe(item);
});
}); });

@ -13,6 +13,10 @@
width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)"; width: ~"calc(var(--masonry-col-width) - var(--masonry-gutter) - 1px)";
} }
.isekai-masonry-item {
margin-bottom: ~"var(--masonry-gutter)";
}
// Column width tools // Column width tools
.col-1 { .col-1 {
width: 100%; // Fallback width: 100%; // Fallback

Loading…
Cancel
Save