vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 1.43 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),g=require("@vuux/utils"),H=(v,r)=>{const n=t.ref([]),l=t.ref([]),f=t.ref(!0),a=t.computed(()=>v.column),c=t.computed(()=>v.gap),h=()=>{l.value=new Array(a.value).fill(0)},y=()=>{r.value&&(n.value=Array.from(r.value.querySelectorAll(v.item)))},i=g.Utils.debounce(()=>{if(typeof window>"u"||!r.value)return;h();const e=r.value.clientWidth,o=Math.floor((e-(a.value-1)*c.value)/a.value);for(let m=0;m<n.value.length;m++){const u=n.value[m];if(!u)continue;u.style.width=`${o}px`;const b=Math.min(...l.value),d=l.value.indexOf(b),x=d*(o+c.value),w=l.value[d];u.style.position="absolute",u.style.transition="transform 0.3s ease",u.style.transform=`translate(${x}px, ${w}px)`,l.value[d]+=u.offsetHeight+c.value}f.value=!1},50),p=t.computed(()=>{const e=Math.max(...l.value);return{height:e?`${e}px`:"100%",position:"relative"}});t.watch(a,()=>{h(),i()});let s=null;return t.onMounted(()=>{y(),i(),s=new ResizeObserver(g.Utils.debounce(()=>{i()},100));for(let e=0;e<n.value.length;e++){const o=n.value[e];o&&s.observe(o)}window.addEventListener("resize",i)}),t.onUnmounted(()=>{if(s){for(let e=0;e<n.value.length;e++){const o=n.value[e];o&&s.unobserve(o)}s.disconnect(),s=null}window.removeEventListener("resize",i)}),{items:n,columnHeights:l,loading:f,column:a,gap:c,containerStyle:p,calculatePositions:i}};exports.useWaterfall=H;