alpinejs-masonry/dist/masonry.min.js

Create masonry layouts based on your CSS grid values 🎉

(()=>{function o(i){let e=parseFloat(getComputedStyle(i).gap),n=[...i.childNodes].filter(t=>t.nodeType===1&&t.tagName!=="TEMPLATE"),r=getComputedStyle(i).gridTemplateColumns.split(" ").length;n.forEach(t=>t.style.removeProperty("margin-top")),r!==1&&n.forEach(function(t,s){let a=n[s-r];if(!a)return;let m=t.getBoundingClientRect().top,c=a.getBoundingClientRect().bottom,d=m-c;d!==e&&(t.style.marginTop=`-${d-e}px`)})}function p(i){i.directive("masonry",(e,{modifiers:n},{cleanup:r})=>{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)),r(()=>{window.removeEventListener("resize",o),window.addEventListener("reload:masonry",o)})})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(p));})();