waterfall-layout-js/dist/index.cjs

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

"use strict";function t(t){var i=function(t,i){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var e=n.call(t,i||"default");if("object"!=typeof e)return e;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===i?String:Number)(t)}(t,"string");return"symbol"==typeof i?i:i+""}function i(i,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(i,t(r.key),r)}}function n(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,i){if(t){if("string"==typeof t)return r(t,i);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(t,i):void 0}}function r(t,i){(null==i||i>t.length)&&(i=t.length);for(var n=0,e=new Array(i);n<i;n++)e[n]=t[n];return e}var o=function(){return t=function t(i,e){var r=this;!function(t,i){if(!(t instanceof i))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=i,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(n(e.items)),this.m=e.m,this.O(),this.v()},(r=[{key:"generateIds",value:function(t){var i=t.map((function(t){var i=Math.random().toString(36).substring(2,8);return t.id=t.id?t.id+i:i,t}));return console.log("生成id了",i),i}},{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,i){var n=null;return function(){n&&clearTimeout(n),n=setTimeout((function(){t()}),i)}}},{key:"initializeContainer",value:function(){var t=this,i=document.getElementById(this.containerId);i&&(this.container=i,this.A&&("ResizeObserver"in window?(this.M=new ResizeObserver((function(i){var n,r=function(t,i){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=e(t))||i&&t&&"number"==typeof t.length){n&&(t=n);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(){n=n.call(t)},n:function(){var t=n.next();return u=t.done,t},e:function(t){h=!0,s=t},f:function(){try{u||null==n.T||n.T()}finally{if(h)throw s}}}}(i);try{for(r.s();!(n=r.n()).done;)n.value,t.update()}catch(t){r.e(t)}finally{r.f()}})),this.M.observe(i)):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[]})),i=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,n(i)),s=i.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),i[s]+=u.height+this.rowGap,e++}this.h=t,this.o=Math.max.apply(Math,n(i))-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=n(this.S([].concat(n(this.items),n(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)}}])&&i(t.prototype,r),o&&i(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,r,o}();o.t=4,module.exports=o;