52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
|
// Generated, do not edit. sha256:87d755cce2f1ccb8186c668965f676f63e76de1e6021910a7efccabd9473cc5d
|
||
|
|
export function spreidOverKolommen(hoogtes, kolommen) {
|
||
|
|
const n = Math.max(1, Math.floor(kolommen) || 1);
|
||
|
|
const som = new Array(n).fill(0);
|
||
|
|
return hoogtes.map(h => {
|
||
|
|
let k = 0;
|
||
|
|
for (let j = 1; j < n; j++) if (som[j] < som[k]) k = j;
|
||
|
|
som[k] += h;
|
||
|
|
return k;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
export function kolomAantal(el) {
|
||
|
|
const raw = getComputedStyle(el).getPropertyValue('--cols');
|
||
|
|
const n = parseInt(raw, 10);
|
||
|
|
return Number.isFinite(n) && n > 0 ? n : 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function layoutMasonry(host, kaartSelector = ':scope > *') {
|
||
|
|
const bestaande = [...host.querySelectorAll(':scope > .masonry-col')];
|
||
|
|
const kaarten = bestaande.length
|
||
|
|
? bestaande.flatMap(c => [...c.children])
|
||
|
|
: [...host.querySelectorAll(kaartSelector)];
|
||
|
|
if (!kaarten.length) { host.replaceChildren(); return; }
|
||
|
|
|
||
|
|
const n = kolomAantal(host);
|
||
|
|
const kolommen = Array.from({ length: n }, () => {
|
||
|
|
const c = document.createElement('div');
|
||
|
|
c.className = 'masonry-col';
|
||
|
|
return c;
|
||
|
|
});
|
||
|
|
host.replaceChildren(...kolommen);
|
||
|
|
|
||
|
|
kolommen[0].append(...kaarten);
|
||
|
|
if (n === 1) return;
|
||
|
|
const hoogtes = kaarten.map(k => k.offsetHeight);
|
||
|
|
const doel = spreidOverKolommen(hoogtes, n);
|
||
|
|
kaarten.forEach((k, i) => kolommen[doel[i]].appendChild(k));
|
||
|
|
}
|
||
|
|
|
||
|
|
export function volgMasonry(host, kaartSelector) {
|
||
|
|
let laatste = kolomAantal(host);
|
||
|
|
layoutMasonry(host, kaartSelector);
|
||
|
|
const onResize = () => {
|
||
|
|
const nu = kolomAantal(host);
|
||
|
|
if (nu === laatste) return;
|
||
|
|
laatste = nu;
|
||
|
|
layoutMasonry(host, kaartSelector);
|
||
|
|
};
|
||
|
|
window.addEventListener('resize', onResize);
|
||
|
|
return () => window.removeEventListener('resize', onResize);
|
||
|
|
}
|