alpinejs-masonry/dist/masonry.esm.js

Create masonry layouts based on your CSS grid values 🎉

function o(r){let e=parseFloat(getComputedStyle(r).gap),n=[...r.childNodes].filter(t=>t.nodeType===1&&t.tagName!=="TEMPLATE"),i=getComputedStyle(r).gridTemplateColumns.split(" ").length;n.forEach(t=>t.style.removeProperty("margin-top")),i!==1&&n.forEach(function(t,s){let a=n[s-i];if(!a)return;let m=t.getBoundingClientRect().top,c=a.getBoundingClientRect().bottom,p=m-c;p!==e&&(t.style.marginTop=`-${p-e}px`)})}function d(r){r.directive("masonry",(e,{modifiers:n},{cleanup:i})=>{let t=n[0],s=n[1]||2500;t==="wait"?setTimeout(()=>o(e),s):o(e),t==="poll"&&setInterval(()=>o(e),s),window.addEventListener("resize",()=>o(e)),window.addEventListener("reload:masonry",()=>o(e)),i(()=>{window.removeEventListener("resize",o),window.addEventListener("reload:masonry",o)})})}var w=d;export{w as default};