waterfall-layout-js/dist/index.esm.js

A library for creating responsive masonry layouts, supporting use in browsers and Node.js.

function t(t){var n=function(t,n){if("object"!=typeof t||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var e=i.call(t,n||"default");if("object"!=typeof e)return e;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"==typeof n?n:n+""}function n(n,i){for(var e=0;e<i.length;e++){var r=i[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,t(r.key),r)}}function i(t){return function(t){if(Array.isArray(t))return r(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||e(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,n){if(t){if("string"==typeof t)return r(t,n);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?r(t,n):void 0}}function r(t,n){(null==n||n>t.length)&&(n=t.length);for(var i=0,e=new Array(n);i<n;i++)e[i]=t[i];return e}var o=function(){return t=function t(n,e){var r=this;!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,t),this.columnCount=t.t,this.i=200,this.o=0,this.u=0,this.h=[],this.l=function(){if(r.v(),"number"==typeof r.m)if(console.log("updateFunction inner"),r.i<r.m&&r.columnCount>1)r.p(r.columnCount-1);else{if(!((r.columnCount+1)*r.m+r.columnCount*r.columnGap<r.u))return!0;r.p(r.columnCount+1)}return!0},this.update=this.I((function(){r.l()&&r.k&&r.k(r.j())}),150),this.ready=this.I((function(){r.l()&&r.C&&r.C(r.j())}),150),this.columnCount=e.columnCount||t.t,this.containerId=n,this.columnGap=e.columnGap||12,this.rowGap=e.rowGap||12,this.A=e.A,this.k=e.k,this.C=e.C,this.items=this.S(i(e.items)),this.m=e.m,this.O(),this.v()},(r=[{key:"generateIds",value:function(t){var n=t.map((function(t){var n=Math.random().toString(36).substring(2,8);return t.id=t.id?t.id+n:n,t}));return console.log("生成id了",n),n}},{key:"getCommonInfo",value:function(){return{i:this.i||0,o:this.o,u:this.u,items:this.h,columnCount:this.columnCount}}},{key:"debounce",value:function(t,n){var i=null;return function(){i&&clearTimeout(i),i=setTimeout((function(){t()}),n)}}},{key:"initializeContainer",value:function(){var t=this,n=document.getElementById(this.containerId);n&&(this.container=n,this.A&&("ResizeObserver"in window?(this.M=new ResizeObserver((function(n){var i,r=function(t,n){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=e(t))||n&&t&&"number"==typeof t.length){i&&(t=i);var r=0,o=function(){};return{s:o,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var s,u=!0,h=!1;return{s:function(){i=i.call(t)},n:function(){var t=i.next();return u=t.done,t},e:function(t){h=!0,s=t},f:function(){try{u||null==i.T||i.T()}finally{if(h)throw s}}}}(n);try{for(r.s();!(i=r.n()).done;)i.value,t.update()}catch(t){r.e(t)}finally{r.f()}})),this.M.observe(n)):window&&"function"==typeof window.addEventListener&&window.addEventListener("resize",(function(){t.update()}))),this.ready())}},{key:"generateNewItems",value:function(){console.log("generateNewItems"),this.W();for(var t=new Array(this.columnCount).fill(0).map((function(){return[]})),n=new Array(this.columnCount).fill(0),e=0;e<this.items.length&&this.i;){var r=this.items[e].height*this.i/this.items[e].width,o=Math.min.apply(Math,i(n)),s=n.indexOf(o),u=Object.assign(Object.assign({},this.items[e]),{width:this.i,height:r,x:this.i*s+this.columnGap*s,y:o,id:this.items[e].id,url:this.items[e].url});t[s].push(u),n[s]+=u.height+this.rowGap,e++}this.h=t,this.o=Math.max.apply(Math,i(n))-this.rowGap,this.container&&(this.container.style.height=this.o+"px")}},{key:"getItemWidth",value:function(){this.container&&(this.i=(this.container.clientWidth-(this.columnCount-1)*this.columnGap)/this.columnCount,this.u=this.container.clientWidth);var t=this.i||0;return console.log(t,"getItemWidth"),this.i||0}},{key:"getUpdatedItems",value:function(){return this.h}},{key:"getContainerHeight",value:function(){return this.o}},{key:"addItems",value:function(t){this.items=i(this.S([].concat(i(this.items),i(t)))),this.update()}},{key:"setColumnCount",value:function(t){console.log(t,"sss"),this.columnCount=t,this.l()}},{key:"updateColumnCount",value:function(t){this.columnCount=t,this.update()}},{key:"unobserveResize",value:function(){this.M&&this.container&&this.M.unobserve(this.container)}}])&&n(t.prototype,r),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,r,o}();o.t=4;export{o as default};