UNPKG

6.18 kBJavaScriptView Raw
1const t={mode:"position",el:"#waterfall",columnWidth:360,columnCount:void 0,columnGap:24,rowGap:24,delay:500,customStyle:"",onChangeUlMaxH:t=>t};function e(t){const e=[...t].map((t=>new Promise(((e,i)=>{t.onload=function(){e("image unloded")},t.onerror=function(){i("image unloded error")},t.complete&&e("image has loded")}))));return Promise.allSettled(e).then((t=>t)).catch((t=>console.log(t)))}class i{config;container;containerWidth;columnCount;liLeft;liNodes;itemList;colList;handleTimer;ulMaxH;prevImageLength;prevLiNodesLength;lastItemsBottom;constructor(t){this.config=t,this.container=document.querySelector(t.el),this.containerWidth=0,this.columnCount=t.columnCount||0,this.liLeft=0,this.liNodes=[],this.itemList=[],this.colList=[],this.handleTimer=null,this.ulMaxH=0,this.prevImageLength=0,this.prevLiNodesLength=0,this.lastItemsBottom=[0,0],this.init()}init(){if(!this.container)throw`container element id:${this.config.el} is not exist`;const{el:t,columnWidth:e,customStyle:i}=this.config;this.containerWidth=this.container.offsetWidth,this.columnCount=this.columnCount||parseInt(this.containerWidth/e+""),function(t,e,i){const n=document.createElement("style"),o=`\n ${t} {\n position: relative;\n }\n ${t}>li {\n position: absolute;\n width: ${e}px;\n left: 0;\n transform: translateY(200px);\n }\n ${t}>li.show {\n transform: translateY(0);\n transition: all 0.3s;\n }\n ${i}\n `;n.innerHTML=o,document.head.appendChild(n)}(t,e,i)}load(){const t=this.container.querySelectorAll("li");if(t?.length<=0)throw`container element id:${this.config.el}>li is not exist`;const e=this.prevLiNodesLength-t.length;this.liNodes=Array.from(t).slice(e),this.prevLiNodesLength=t.length,this.lastItemsBottom=this.colList.map((t=>t[t.length-1]?.bottom)),this.initLayout(),this.initPolling()}initLayout(){this.itemList=[],this.colList=[];for(let t=0;t<this.columnCount;t++)this.colList.push([]);for(let t=0;t<this.liNodes.length;t++){const e=this.liNodes[t].offsetHeight+this.config.rowGap;this.itemList.push({index:t,bottom:e,height:e})}this.refreshLayout()}refreshLayout(){const t=this.itemList,e=this.colList;for(let i=0;i<this.liNodes.length;i++){const n=t[i].height;let o=0,s=0;for(let t=0;t<e.length;t++){const i=e[t].length-1,l=(e[t]?.[i]?.bottom||this.lastItemsBottom[t]||0)+n;(0==o||l<o)&&(o=l,s=t)}t[i].bottom=o,e[s].push(t[i])}this.renderView()}renderView(){const t=this.colList;for(let e=0;e<t.length;e++){const i=t[e];for(let t=0;t<i.length;t++){const n=this.liNodes[i[t].index],o=0===e?0:this.config.columnGap;n.style.left=e*this.config.columnWidth+this.liLeft+o+"px",n.style.top=i[t].bottom-i[t].height+"px"}}for(let t=0;t<this.liNodes.length;t++)this.liNodes[t].classList.contains("show")||this.liNodes[t].classList.add("show");for(let e=0;e<t.length;e++){const i=t[e].length-1,n=t[e][i].bottom;this.ulMaxH<n&&(this.ulMaxH=n)}this.container.style.height=this.ulMaxH+"px"}loadImages(){const t=this.container?.querySelectorAll("img")||[],i=this.prevImageLength-t.length,n=[...t].slice(i);return this.prevImageLength=t.length,e(n)}initPolling(){this.pollingRefresh(),this.loadImages().then((()=>{this.handleTimer&&clearInterval(this.handleTimer),this.initLayout(),setTimeout((()=>{this.config?.onChangeUlMaxH?.(this.ulMaxH)}),20)})).catch((t=>{console.log("图片加载任务出错--\x3e",t),this.handleTimer&&clearInterval(this.handleTimer)}))}pollingRefresh(){this.handleTimer&&clearInterval(this.handleTimer),this.handleTimer=setInterval((()=>{this.initLayout(),console.log("polling refresh...")}),this.config.delay)}}class n{config;container;containerWidth;columnCount;handleTimer;prevImageLength;prevLiNodesLength;divItemNodes;liNodes;constructor(t){this.config=t,this.container=document.querySelector(t.el),this.containerWidth=0,this.columnCount=t.columnCount||0,this.handleTimer=null,this.divItemNodes=[],this.liNodes=[],this.prevImageLength=0,this.prevLiNodesLength=0,this.init()}init(){if(!this.container)throw`container element id:${this.config.el} is not exist`;const{el:t,columnWidth:e,customStyle:i}=this.config;this.containerWidth=this.container.offsetWidth,this.columnCount=this.columnCount||parseInt(this.containerWidth/e+""),function(t,e,i,n){const o=document.createElement("style"),s=`\n ${t} {\n display: grid;\n grid-template-columns: repeat(${e}, 1fr);\n grid-auto-rows: 1px;\n }\n ${t}>li {\n width: ${i}px;\n transform: translateY(200px);\n }\n ${t}>li.show {\n transform: translateY(0);\n transition: all 0.3s;\n }\n ${n}\n `;o.innerHTML=s,document.head.appendChild(o)}(t,this.columnCount,e,i)}load(){const t=this.container.querySelectorAll("li"),e=this.container.querySelectorAll("li>div");if(e?.length<=0)throw`container element id:${this.config.el}>li is not exist`;const i=this.prevLiNodesLength-t.length;this.divItemNodes=Array.from(e).slice(i),this.liNodes=Array.from(t).slice(i),this.prevLiNodesLength=t.length,this.initLayout(),this.initPolling()}initLayout(){const t=this.divItemNodes,e=this.liNodes;let i=[];for(let e=0;e<t.length;e++){const n=t[e].offsetHeight;i.push(n)}for(let t=0;t<e.length;t++){const n=e[t],o=i[t];n.style.gridRowEnd=`span ${parseInt(o)+this.config.rowGap}`,e[t].classList.contains("show")||e[t].classList.add("show")}}loadImages(){const t=this.container?.querySelectorAll("img"),i=this.prevImageLength-t.length,n=Array.from(t).slice(i);return this.prevImageLength=t.length,e(n)}initPolling(){this.pollingRefresh(),this.loadImages().then((t=>{this.handleTimer&&clearInterval(this.handleTimer),this.initLayout(),setTimeout((()=>{if(this.config.onChangeUlMaxH){const t=this.container.offsetHeight;this.config.onChangeUlMaxH(t)}}),20)})).catch((t=>{console.log("图片加载任务出错--\x3e",t),this.handleTimer&&clearInterval(this.handleTimer)}))}pollingRefresh(){this.handleTimer&&clearInterval(this.handleTimer),this.handleTimer=setInterval((()=>{this.initLayout(),console.log("polling refresh...")}),this.config.delay)}}function o(e){const o=Object.assign(t,e);return"position"===o.mode?new i(o):new n(o)}export{o as default};