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

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

!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).t=n()}(this,(function(){"use strict";function t(t){var n=function(t,n){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,n||"default");if("object"!=typeof i)return i;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,e){for(var i=0;i<e.length;i++){var r=e[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,t(r.key),r)}}function e(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)||i(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 i(t,n){if(t){if("string"==typeof t)return r(t,n);var e=Object.prototype.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?r(t,n):void 0}}function r(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,i=new Array(n);e<n;e++)i[e]=t[e];return i}var o=function(){return t=function t(n,i){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.i,this.o=200,this.u=0,this.h=0,this.l=[],this.v=function(){if(r.m(),"number"==typeof r.p)if(console.log("updateFunction inner"),r.o<r.p&&r.columnCount>1)r.I(r.columnCount-1);else{if(!((r.columnCount+1)*r.p+r.columnCount*r.columnGap<r.h))return!0;r.I(r.columnCount+1)}return!0},this.update=this.k((function(){r.v()&&r.j&&r.j(r.C())}),150),this.ready=this.k((function(){r.v()&&r.A&&r.A(r.C())}),150),this.columnCount=i.columnCount||t.i,this.containerId=n,this.columnGap=i.columnGap||12,this.rowGap=i.rowGap||12,this.S=i.S,this.j=i.j,this.A=i.A,this.items=this.O(e(i.items)),this.p=i.p,this.T(),this.m()},(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{o:this.o||0,u:this.u,h:this.h,items:this.l,columnCount:this.columnCount}}},{key:"debounce",value:function(t,n){var e=null;return function(){e&&clearTimeout(e),e=setTimeout((function(){t()}),n)}}},{key:"initializeContainer",value:function(){var t=this,n=document.getElementById(this.containerId);n&&(this.container=n,this.S&&("ResizeObserver"in window?(this.M=new ResizeObserver((function(n){var e,r=function(t,n){var e="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!e){if(Array.isArray(t)||(e=i(t))||n&&t&&"number"==typeof t.length){e&&(t=e);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(){e=e.call(t)},n:function(){var t=e.next();return u=t.done,t},e:function(t){h=!0,s=t},f:function(){try{u||null==e.W||e.W()}finally{if(h)throw s}}}}(n);try{for(r.s();!(e=r.n()).done;)e.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.N();for(var t=new Array(this.columnCount).fill(0).map((function(){return[]})),n=new Array(this.columnCount).fill(0),i=0;i<this.items.length&&this.o;){var r=this.items[i].height*this.o/this.items[i].width,o=Math.min.apply(Math,e(n)),s=n.indexOf(o),u=Object.assign(Object.assign({},this.items[i]),{width:this.o,height:r,x:this.o*s+this.columnGap*s,y:o,id:this.items[i].id,url:this.items[i].url});t[s].push(u),n[s]+=u.height+this.rowGap,i++}this.l=t,this.u=Math.max.apply(Math,e(n))-this.rowGap,this.container&&(this.container.style.height=this.u+"px")}},{key:"getItemWidth",value:function(){this.container&&(this.o=(this.container.clientWidth-(this.columnCount-1)*this.columnGap)/this.columnCount,this.h=this.container.clientWidth);var t=this.o||0;return console.log(t,"getItemWidth"),this.o||0}},{key:"getUpdatedItems",value:function(){return this.l}},{key:"getContainerHeight",value:function(){return this.u}},{key:"addItems",value:function(t){this.items=e(this.O([].concat(e(this.items),e(t)))),this.update()}},{key:"setColumnCount",value:function(t){console.log(t,"sss"),this.columnCount=t,this.v()}},{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}();return o.i=4,o}));