@egjs/grid - npm Package Compare versions

Comparing version 1.7.0-beta.7 to 1.7.0-beta.8

declaration/consts.d.ts

 import { GridOptions } from "./types";
 export declare const DEFAULT_GRID_OPTIONS: Required<GridOptions>;
-export declare const INVISIBLE_POS = -9999;
-export declare const MINIMUM_NUMBER = 0.000001;
 export declare enum PROPERTY_TYPE {
@@ -6,0 +4,0 @@ PROPERTY = 1,

declaration/grids/MasonryGrid.d.ts

@@ -10,2 +10,3 @@ import Grid from "../Grid";
     align?: GridAlign;
+    columnCalculationThreshold?: number;
 }
@@ -18,2 +19,3 @@ export declare class MasonryGrid extends Grid<MasonryGridOptions> {
         align: PROPERTY_TYPE;
+        columnCalculationThreshold: PROPERTY_TYPE;
         gap: PROPERTY_TYPE;
@@ -20,0 +22,0 @@ defaultDirection: PROPERTY_TYPE;

declaration/ItemRenderer.d.ts

@@ -10,2 +10,3 @@ import { GridItem } from "./GridItem";
     isConstantSize?: boolean;
+    useRoundedSize?: boolean;
 }
@@ -12,0 +13,0 @@ export interface ItemRendererStatus {

declaration/types.d.ts

@@ -18,3 +18,2 @@ import { GRID_METHODS } from "./consts";
     useTransform?: boolean;
-    hideBeforeLoading?: boolean;
     renderOnPropertyChange?: boolean;
@@ -25,2 +24,3 @@ preserveUIOnDestroy?: boolean;
     outlineSize?: number;
+    useRoundedSize?: boolean;
     externalItemRenderer?: ItemRenderer | null;
@@ -27,0 +27,0 @@ externalContainerManager?: ContainerManager | null;

dist/grid.min.js

@@ -7,5 +7,5 @@ /*
 repository: https://github.com/naver/egjs-grid
-version: 1.7.0-beta.7
+version: 1.7.0
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Grid=e()}(this,function(){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var f=function(){return(f=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function o(t,e,n,i){var r,o=arguments.length,s=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;0<=a;a--)(r=t[a])&&(s=(o<3?r(s):3<o?r(e,n,s):r(e,n))||s);return 3<o&&s&&Object.defineProperty(e,n,s),s}function g(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var i=Array(t),r=0,e=0;e<n;e++)for(var o=arguments[e],s=0,a=o.length;s<a;s++,r++)i[r]=o[s];return i}function c(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],i=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return{value:(t=t&&i>=t.length?void 0:t)&&t[i++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,r,o=n.call(t),s=[];try{for(;(void 0===e||0<e--)&&!(i=o.next()).done;)s.push(i.value)}catch(t){r={error:t}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return s}(arguments[e]));return t}function l(t){return void 0===t}var a,h,d,u=function(){function t(t,e){var n,i;if(this.eventType=t,this._canceled=!1,e)try{for(var r=c(Object.keys(e)),o=r.next();!o.done;o=r.next()){var s=o.value;this[s]=e[s]}}catch(t){n={error:t}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(n)throw n.error}}}var e=t.prototype;return e.stop=function(){this._canceled=!0},e.isCanceled=function(){return this._canceled},t}(),t=function(){function t(){this._eventHandler={}}var e=t.prototype;return e.trigger=function(e){for(var n=[],t=1;t<arguments.length;t++)n[t-1]=arguments[t];var i=e instanceof u?e.eventType:e,i=s(this._eventHandler[i]||[]);return i.length<=0||(e instanceof u?(e.currentTarget=this,i.forEach(function(t){t(e)})):i.forEach(function(t){t.apply(void 0,s(n))})),this},e.once=function(n,i){var r,o=this;if("object"==typeof n&&l(i)){var t,e=n;for(t in e)this.once(t,e[t]);return this}return"string"==typeof n&&"function"==typeof i&&this.on(n,r=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];i.apply(void 0,s(t)),o.off(n,r)}),this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&l(e)){var n,i=t;for(n in i)this.on(n,i[n]);return this}var r;return"string"==typeof t&&"function"==typeof e&&(r=this._eventHandler[t],l(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)),this},e.off=function(t,e){var n,i;if(l(t))return this._eventHandler={},this;if(l(e)){if("string"==typeof t)return delete this._eventHandler[t],this;var r,o=t;for(r in o)this.off(r,o[r]);return this}var s=this._eventHandler[t];if(s){var a=0;try{for(var u=c(s),h=u.next();!h.done;h=u.next()){if(h.value===e){s.splice(a,1),s.length<=0&&delete this._eventHandler[t];break}a++}}catch(t){n={error:t}}finally{try{h&&!h.done&&(i=u.return)&&i.call(u)}finally{if(n)throw n.error}}}return this},t.VERSION="3.0.1",t}(),p={horizontal:!1,useTransform:!1,percentage:!1,isEqualSize:!1,isConstantSize:!1,gap:0,attributePrefix:"data-grid-",resizeDebounce:100,maxResizeDebounce:0,autoResize:!0,preserveUIOnDestroy:!1,defaultDirection:"end",hideBeforeLoading:!1,externalContainerManager:null,externalItemRenderer:null,renderOnPropertyChange:!0,useFit:!0,outlineLength:0,outlineSize:0},m=-9999,R=1e-6;(P=a=a||{})[P.PROPERTY=1]="PROPERTY",P[P.RENDER_PROPERTY=2]="RENDER_PROPERTY",(C=h=h||{})[C.UNCHECKED=1]="UNCHECKED",C[C.UNMOUNTED=2]="UNMOUNTED",C[C.MOUNTED=3]="MOUNTED",(Y=d=d||{})[Y.NEED_UPDATE=1]="NEED_UPDATE",Y[Y.WAIT_LOADING=2]="WAIT_LOADING",Y[Y.UPDATED=3]="UPDATED";var n={gap:a.RENDER_PROPERTY,defaultDirection:a.PROPERTY,renderOnPropertyChange:a.PROPERTY,preserveUIOnDestroy:a.PROPERTY,useFit:a.PROPERTY,outlineSize:a.RENDER_PROPERTY,outlineLength:a.RENDER_PROPERTY},e=["syncElements","updateItems","getItems","setItems","renderItems","getContainerInlineSize","getContainerElement"],v={horizontal:{inlinePos:"top",contentPos:"left",inlineSize:"height",contentSize:"width"},vertical:{inlinePos:"left",contentPos:"top",inlineSize:"width",contentSize:"height"}},y=function(i){function t(t,e){var n=i.call(this)||this;return n.container=t,n._resizeTimer=0,n._maxResizeDebounceTimer=0,n._onResize=function(){clearTimeout(n._resizeTimer),clearTimeout(n._maxResizeDebounceTimer),n._maxResizeDebounceTimer=0,n._resizeTimer=0,n.trigger("resize")},n._scheduleResize=function(){var t=n.options,e=t.resizeDebounce,t=t.maxResizeDebounce;!n._maxResizeDebounceTimer&&e<=t&&(n._maxResizeDebounceTimer=window.setTimeout(n._onResize,t)),n._resizeTimer&&(clearTimeout(n._resizeTimer),n._resizeTimer=0),n._resizeTimer=window.setTimeout(n._onResize,e)},n.options=f({horizontal:p.horizontal,autoResize:p.autoResize,resizeDebounce:p.resizeDebounce,maxResizeDebounce:p.maxResizeDebounce},e),n._init(),n}r(t,i);var e=t.prototype;return e.resize=function(){var t=this.container;this.setRect({width:t.clientWidth,height:t.clientHeight})},e.getRect=function(){return this.rect},e.setRect=function(t){this.rect=f({},t)},e.getInlineSize=function(){return this.rect[this.options.horizontal?"height":"width"]},e.getContentSize=function(){return this.rect[this.options.horizontal?"width":"height"]},e.getStatus=function(){return{rect:f({},this.rect)}},e.setStatus=function(t){this.rect=f({},t.rect),this.setContentSize(this.getContentSize())},e.setContentSize=function(t){var e=this.options.horizontal?"width":"height";this.rect[e]=t,this.container.style[e]=t+"px"},e.destroy=function(t){void 0===t&&(t={}),window.removeEventListener("resize",this._scheduleResize),t.preserveUI||(this.container.style.cssText=this.orgCSSText)},e._init=function(){var t=this.container,e=window.getComputedStyle(t);this.orgCSSText=t.style.cssText,"static"===e.position&&(t.style.position="relative"),this.options.autoResize&&window.addEventListener("resize",this._scheduleResize)},t}(t),S=function(t,e){return(S=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function z(t,e){function n(){this.constructor=t}S(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var E=function(){return(E=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};var P="undefined"!=typeof window,C=P?window.navigator.userAgent:"",_=P&&!!("getComputedStyle"in window),O=/MSIE|Trident|Windows Phone|Edge/.test(C),T=P&&!!("addEventListener"in document),I="width",w="height";function b(t,e){return t.getAttribute(e)||""}function D(t){return[].slice.call(t)}function x(t,e){return void 0===e&&(e="data-"),"loading"in t&&"lazy"===t.getAttribute("loading")||!!t.getAttribute(e+"lazy")}function M(t,e,n){T?t.addEventListener(e,n,!1):t.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function k(t,e,n){t.removeEventListener?t.removeEventListener(e,n,!1):t.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function N(t,e){var n=t["client"+e]||t["offset"+e];return parseFloat(n||(t=t,((_?window.getComputedStyle(t):t.currentStyle)||{})[e.toLowerCase()]))||0}function A(t,e,n){var i=D(t.querySelectorAll(function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var i=Array(t),r=0,e=0;e<n;e++)for(var o=arguments[e],s=0,a=o.length;s<a;s++,r++)i[r]=o[s];return i}(["["+n+"skip] ["+n+"width]"],e.map(function(t){return["["+n+"skip] "+t,t+"["+n+"skip]","["+n+"width] "+t].join(", ")})).join(", ")));return D(t.querySelectorAll("["+n+"width], "+e.join(", "))).filter(function(t){return-1===i.indexOf(t)})}var L=[];function F(t,e){L.length||M(window,"resize",j),t.__PREFIX__=e,L.push(t),U(t)}function U(t,e){void 0===e&&(e="data-");var n,i=t.__PREFIX__||e,r=parseInt(b(t,""+i+I),10)||0,e=parseInt(b(t,""+i+w),10)||0;b(t,i+"fixed")===w?(n=N(t,"Height")||e,t.style[I]=r/e*n+"px"):(n=N(t,"Width")||r,t.style[w]=e/r*n+"px")}function j(){L.forEach(function(t){U(t)})}var Y=function(r){function t(t,e){void 0===e&&(e={});var n=r.call(this)||this;n.isReady=!1,n.isPreReady=!1,n.hasDataSize=!1,n.hasLoading=!1,n.isSkip=!1,n.onCheck=function(t){n.clear(),t&&"error"===t.type&&n.onError(n.element);t=!n.hasDataSize&&!n.hasLoading;n.onReady(t)},n.options=E({prefix:"data-"},e),n.element=t;var i=n.options.prefix;return n.hasDataSize=(e=i,!!t.getAttribute((e=void 0===e?"data-":e)+"width")),n.isSkip=(e=i,!!t.getAttribute((e=void 0===e?"data-":e)+"skip")),n.hasLoading=x(t,i),n}z(t,r);var e=t.prototype;return e.check=function(){return this.isSkip||!this.checkElement()?(this.onAlreadyReady(!0),!1):(this.hasDataSize&&F(this.element,this.options.prefix),(this.hasDataSize||this.hasLoading)&&this.onAlreadyPreReady(),!0)},e.addEvents=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){M(n,t,e.onCheck)})},e.clear=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){k(n,t,e.onCheck)}),this.removeAutoSizer()},e.destroy=function(){this.clear(),this.off()},e.removeAutoSizer=function(){var t,e,n;this.hasDataSize&&(n=this.options.prefix,t=this.element,e=n,(n=L.indexOf(t))<0||(e=b(t,e+"fixed"),delete t.__PREFIX__,t.style[e===w?I:w]="",L.splice(n,1),L.length||k(window,"resize",j)))},e.onError=function(t){this.trigger("error",{element:this.element,target:t})},e.onPreReady=function(){this.isPreReady||(this.isPreReady=!0,this.trigger("preReady",{element:this.element,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onReady=function(t){this.isReady||((t=!this.isPreReady&&t)&&(this.isPreReady=!0),this.removeAutoSizer(),this.isReady=!0,this.trigger("ready",{element:this.element,withPreReady:t,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onAlreadyError=function(t){var e=this;setTimeout(function(){e.onError(t)})},e.onAlreadyPreReady=function(){var t=this;setTimeout(function(){t.onPreReady()})},e.onAlreadyReady=function(t){var e=this;setTimeout(function(){e.onReady(t)})},t.EVENTS=[],t}(t),G=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}z(e,t);var n=e.prototype;return n.setHasLoading=function(t){this.hasLoading=t},n.check=function(){return this.isSkip?(this.onAlreadyReady(!0),!1):(this.hasDataSize?(F(this.element,this.options.prefix),this.onAlreadyPreReady()):this.trigger("requestChildren"),!0)},n.checkElement=function(){return!0},n.destroy=function(){this.clear(),this.trigger("requestDestroy"),this.off()},n.onAlreadyPreReady=function(){t.prototype.onAlreadyPreReady.call(this),this.trigger("reqeustReadyChildren")},e.EVENTS=[],e}(Y),C=function(n){function t(t){void 0===t&&(t={});var e=n.call(this)||this;return e.readyCount=0,e.preReadyCount=0,e.totalCount=0,e.totalErrorCount=0,e.isPreReadyOver=!0,e.elementInfos=[],e.options=E({loaders:{},prefix:"data-"},t),e}z(t,n);var e=t.prototype;return e.check=function(t){var o=this,n=this.options.prefix;this.clear(),this.elementInfos=D(t).map(function(t,r){var e=o.getLoader(t,{prefix:n});return e.check(),e.on("error",function(t){o.onError(r,t.target)}).on("preReady",function(t){var e=o.elementInfos[r];e.hasLoading=t.hasLoading,e.isSkip=t.isSkip;t=o.checkPreReady(r);o.onPreReadyElement(r),t&&o.onPreReady()}).on("ready",function(t){var e=t.withPreReady,n=t.hasLoading,i=t.isSkip,t=o.elementInfos[r];t.hasLoading=n,t.isSkip=i;t=e&&o.checkPreReady(r),i=o.checkReady(r);e&&o.onPreReadyElement(r),o.onReadyElement(r),t&&o.onPreReady(),i&&o.onReady()}),{loader:e,element:t,hasLoading:!1,hasError:!1,isPreReady:!1,isReady:!1,isSkip:!1}});t=this.elementInfos.length;return(this.totalCount=t)||setTimeout(function(){o.onPreReady(),o.onReady()}),this},e.getTotalCount=function(){return this.totalCount},e.isPreReady=function(){return this.elementInfos.every(function(t){return t.isPreReady})},e.isReady=function(){return this.elementInfos.every(function(t){return t.isReady})},e.hasError=function(){return 0<this.totalErrorCount},e.clear=function(){this.isPreReadyOver=!1,this.totalCount=0,this.preReadyCount=0,this.readyCount=0,this.totalErrorCount=0,this.elementInfos.forEach(function(t){!t.isReady&&t.loader&&t.loader.destroy()}),this.elementInfos=[]},e.destroy=function(){this.clear(),this.off()},e.getLoader=function(e,t){var n=this,i=e.tagName.toLowerCase(),r=this.options.loaders,o=t.prefix,s=Object.keys(r);if(r[i])return new r[i](e,t);var a=new G(e,t),u=D(e.querySelectorAll(s.join(", ")));a.setHasLoading(u.some(function(t){return x(t,o)}));var h=!1,c=this.clone().on("error",function(t){a.onError(t.target)}).on("ready",function(){a.onReady(h)});return a.on("requestChildren",function(){var t=A(e,s,n.options.prefix);c.check(t).on("preReady",function(t){(h=t.isReady)||a.onPreReady()})}).on("reqeustReadyChildren",function(){c.check(u)}).on("requestDestroy",function(){c.destroy()}),a},e.clone=function(){return new t(E({},this.options))},e.checkPreReady=function(t){return this.elementInfos[t].isPreReady=!0,++this.preReadyCount,!(this.preReadyCount<this.totalCount)},e.checkReady=function(t){return this.elementInfos[t].isReady=!0,++this.readyCount,!(this.readyCount<this.totalCount)},e.onError=function(t,e){var n=this.elementInfos[t];n.hasError=!0,this.trigger("error",{element:n.element,index:t,target:e,errorCount:this.getErrorCount(),totalErrorCount:++this.totalErrorCount})},e.onPreReadyElement=function(t){var e=this.elementInfos[t];this.trigger("preReadyElement",{element:e.element,index:t,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isSkip:e.isSkip})},e.onPreReady=function(){this.isPreReadyOver=!0,this.trigger("preReady",{readyCount:this.readyCount,totalCount:this.totalCount,isReady:this.isReady(),hasLoading:this.hasLoading()})},e.onReadyElement=function(t){var e=this.elementInfos[t];this.trigger("readyElement",{index:t,element:e.element,hasError:e.hasError,errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isPreReadyOver:this.isPreReadyOver,isSkip:e.isSkip})},e.onReady=function(){this.trigger("ready",{errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,totalCount:this.totalCount})},e.getErrorCount=function(){return this.elementInfos.filter(function(t){return t.hasError}).length},e.hasLoading=function(){return this.elementInfos.some(function(t){return t.hasLoading})},t}(t),H=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return z(e,t),e.prototype.checkElement=function(){var t=this.element,e=t.getAttribute("src");if(t.complete){if(e)return t.naturalWidth||this.onAlreadyError(t),!1;this.onAlreadyPreReady()}return this.addEvents(),O&&t.setAttribute("src",e),!0},e.EVENTS=["load","error"],e}(Y),W=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return z(e,t),e.prototype.checkElement=function(){var t=this.element;return!(1<=t.readyState)&&(t.error?(this.onAlreadyError(t),!1):(this.addEvents(),!0))},e.EVENTS=["loadedmetadata","error"],e}(Y),q=function(e){function t(t){return e.call(this,E({loaders:{img:H,video:W}},t=void 0===t?{}:t))||this}return z(t,e),t}(C);function V(t){return"object"==typeof t}function B(t){var e,r=t.prototype,o=t.propertyTypes;for(e in o)!function(n){var i=o[n]===a.RENDER_PROPERTY,t=Object.getOwnPropertyDescriptor(r,n)||{};Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:t.get||function(){return this.options[n]},set:t.set||function(t){var e=this.options;e[n]!==t&&(e[n]=t,i&&e.renderOnPropertyChange&&this.scheduleRender())}})}(e)}function K(e){return function(t,r){e.forEach(function(i){i in t||(t[i]=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=(n=this[r])[i].apply(n,t);return n===this[r]?this:n})})}}function X(t){for(var e=[],n=0;n<t;++n)e.push(n);return e}function J(t,e){return Math.max(t-e[1],e[0]-t,0)+1}var P=K(e),Q=function(){function t(t){this.initialRect=null,this.sizePercetage=!1,this.posPercetage=!1,this.options=f({attributePrefix:p.attributePrefix,useTransform:p.useTransform,horizontal:p.horizontal,percentage:p.percentage,isEqualSize:p.isEqualSize,isConstantSize:p.isConstantSize},t),this._init()}var e=t.prototype;return e.resize=function(){this.initialRect=null},e.renderItems=function(t){var e=this;t.forEach(function(t){e._renderItem(t)})},e.getInlineSize=function(){return this.containerRect[this.options.horizontal?"height":"width"]},e.setContainerRect=function(t){this.containerRect=t},e.updateItems=function(t){var e=this;t.forEach(function(t){e._updateItem(t)})},e.getStatus=function(){return{initialRect:this.initialRect}},e.setStatus=function(t){this.initialRect=t.initialRect},e._init=function(){var t=this.options.percentage,e=!1,n=!1;!0===t?n=e=!0:t&&(-1<t.indexOf("position")&&(n=!0),-1<t.indexOf("size")&&(e=!0)),this.posPercetage=n,this.sizePercetage=e},e._updateItem=function(t){var e,n=this.options,i=n.isEqualSize,r=n.isConstantSize,o=this.initialRect,s=t.orgRect,a=t.element,u=t.updateState===d.WAIT_LOADING,n=s&&s.width&&s.height;if(i&&o)e=o;else if(r&&n&&!u)e=s;else{if(!a)return;e={left:a.offsetLeft,top:a.offsetTop,width:a.offsetWidth,height:a.offsetHeight}}return t.isFirstUpdate||(t.orgRect=f({},e)),t.rect=f({},e),t.element&&(t.mountState=h.MOUNTED),t.updateState===d.NEED_UPDATE&&(t.updateState=d.UPDATED,t.isFirstUpdate=!0),t.attributes=a?function(t,e){for(var n={},i=t.attributes,r=i.length,o=0;o<r;++o){var s=i[o],a=s.name,s=s.value;-1!==a.indexOf(e)&&(n[a.replace(e,"").replace(/[\s-_]([a-z])/g,function(t,e){return e.toUpperCase()})]=s)}return n}(a,this.options.attributePrefix):{},u||(this.initialRect=f({},e)),e},e._renderItem=function(t){var n,i,e,r,o,s,a,u=t.element,h=t.cssRect;u&&h&&(a=(e=this.options).horizontal,t=e.useTransform,n=this.posPercetage,i=this.sizePercetage,e=["position: absolute;"],r=(a=v[a?"horizontal":"vertical"]).inlineSize,o=a.inlinePos,s=this.getInlineSize(),a=h,a=Object.keys(a),t&&(a=a.filter(function(t){return"top"!==t&&"left"!==t}),e.push("transform: translate("+(h.left||0)+"px, "+(h.top||0)+"px);")),e.push.apply(e,a.map(function(t){var e=h[t];return t===r&&i||t===o&&n?t+": "+e/s*100+"%;":t+": "+e+"px;"})),u.style.cssText+=e.join(""))},t}(),Z=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var n=this.keys,i=this.values,r=n.indexOf(t),r=-1===r?n.length:r;n[r]=t,i[r]=e},t}(),$=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),tt="function"==typeof Map,et=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var nt=function(){function t(t,e,n,i,r,o,s,a){this.prevList=t,this.list=e,this.added=n,this.removed=i,this.changed=r,this.maintained=o,this.changedBeforeAdded=s,this.fixed=a}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t,n,r,o,t=(t=this.changedBeforeAdded,n=this.fixed,r=[],o=[],t.forEach(function(t){var e=t[0],n=t[1],t=new et;r[e]=t,o[n]=t}),r.forEach(function(t,e){t.connect(r[e-1])}),t.filter(function(t,e){return!n[e]}).map(function(t,e){var n=t[0],i=t[1];if(n===i)return[0,0];t=r[n],n=o[i-1],i=t.getIndex();return t.disconnect(),n?t.connect(n,n.next):t.connect(void 0,r[0]),[i,t.getIndex()]})),s=this.changed,a=[];this.cacheOrdered=t.filter(function(t,e){var n=t[0],i=t[1],t=s[e],e=t[0],t=t[1];if(n!==i)return a.push([e,t]),!0}),this.cachePureChanged=a},t}();var it,rt="function"==typeof Map?void 0:(it=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++it)});function ot(t,e){return n=t,i=e,r=rt,t=tt?Map:r?$:Z,e=r||function(t){return t},o=[],s=[],a=[],r=n.map(e),e=i.map(e),u=new t,h=new t,c=[],l=[],f={},d=[],g=p=0,r.forEach(function(t,e){u.set(t,e)}),e.forEach(function(t,e){h.set(t,e)}),r.forEach(function(t,e){t=h.get(t);void 0===t?(++g,s.push(e)):f[t]=g}),e.forEach(function(t,e){t=u.get(t);void 0===t?(o.push(e),++p):(a.push([t,e]),g=f[e]||0,c.push([t-g,e-p]),l.push(e===t),t!==e&&d.push([t,e]))}),s.reverse(),new nt(n,i,o,s,d,a,c,l);var n,i,r,o,s,a,u,h,c,l,f,d,p,g}var st=function(){function t(t,e){void 0===e&&(e={}),this.horizontal=t,this.isUpdate=!1,this.hasTransition=!1,this.transitionDuration="";var n,t=e.element,i=f({key:"",orgRect:{left:0,top:0,width:0,height:0},rect:{left:0,top:0,width:0,height:0},cssRect:{},attributes:{},data:{},isFirstUpdate:!1,mountState:h.UNCHECKED,updateState:d.NEED_UPDATE,element:t||null,orgCSSText:null!==(t=null==t?void 0:t.style.cssText)&&void 0!==t?t:"",gridData:{}},e);for(n in i)this[n]=i[n]}var e=t.prototype;return Object.defineProperty(e,"orgInlineSize",{get:function(){var t=this.orgRect,e=this.rect;return this.horizontal?t.height||e.height:t.width||e.width},enumerable:!1,configurable:!0}),Object.defineProperty(e,"orgContentSize",{get:function(){var t=this.orgRect,e=this.rect;return this.horizontal?t.width||e.width:t.height||e.height},enumerable:!1,configurable:!0}),Object.defineProperty(e,"inlineSize",{get:function(){var t=this.rect;return this.horizontal?t.height:t.width},enumerable:!1,configurable:!0}),Object.defineProperty(e,"contentSize",{get:function(){var t=this.rect;return this.horizontal?t.width:t.height},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssInlineSize",{get:function(){var t=this.cssRect;return this.horizontal?t.height:t.width},set:function(t){this.cssRect[this.horizontal?"height":"width"]=t},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssContentSize",{get:function(){var t=this.cssRect;return this.horizontal?t.width:t.height},set:function(t){this.cssRect[this.horizontal?"width":"height"]=t},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssInlinePos",{get:function(){var t=this.cssRect;return this.horizontal?t.top:t.left},set:function(t){this.cssRect[this.horizontal?"top":"left"]=t},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssContentPos",{get:function(){var t=this.cssRect;return this.horizontal?t.left:t.top},set:function(t){this.cssRect[this.horizontal?"left":"top"]=t},enumerable:!1,configurable:!0}),e.setCSSGridRect=function(t){var e,n=v[this.horizontal?"horizontal":"vertical"],i={};for(e in t)i[n[e]]=t[e];this.cssRect=i},e.getStatus=function(){return{mountState:this.mountState,updateState:this.updateState,attributes:this.attributes,orgCSSText:this.orgCSSText,isFirstUpdate:this.isFirstUpdate,element:null,key:this.key,orgRect:this.orgRect,rect:this.rect,cssRect:this.cssRect,gridData:this.gridData,data:this.data}},e.getMinimizedStatus=function(){var t={orgRect:this.orgRect,rect:this.rect,cssRect:this.cssRect,attributes:this.attributes,gridData:this.gridData},e=this,n=e.key,i=e.mountState,r=e.updateState,o=e.isFirstUpdate,e=e.orgCSSText;return void 0!==n&&(t.key=n),i!==h.UNCHECKED&&(t.mountState=i),r!==d.NEED_UPDATE&&(t.updateState=r),o&&(t.isFirstUpdate=!0),e&&(t.orgCSSText=e),t},t}(),at=function(l){function t(t,e){void 0===e&&(e={});var n=l.call(this)||this;n.items=[],n.outlines={start:[],end:[]},n._renderTimer=0,n._onResize=function(){n.renderItems({useResize:!0})},n.options=f(f({},n.constructor.defaultOptions),e),n.containerElement="string"==typeof t?document.querySelector(t):t;var i=n.options,r=i.isEqualSize,o=i.isConstantSize,s=i.useTransform,a=i.horizontal,u=i.percentage,h=i.externalContainerManager,c=i.externalItemRenderer,e=i.resizeDebounce,t=i.maxResizeDebounce,i=i.autoResize;return n.containerManager=h||new y(n.containerElement,{horizontal:a,resizeDebounce:e,maxResizeDebounce:t,autoResize:i}).on("resize",n._onResize),n.itemRenderer=c||new Q({useTransform:s,isEqualSize:r,isConstantSize:o,percentage:u}),n._init(),n}r(t,l);var e=t.prototype;return e.getContainerElement=function(){return this.containerElement},e.getItems=function(){return this.items},e.getChildren=function(){return[].slice.call(this.containerElement.children)},e.setItems=function(t){return this.items=t,this},e.getContainerInlineSize=function(){return this.containerManager.getInlineSize()},e.getOutlines=function(){return this.outlines},e.setOutlines=function(t){return this.outlines=t,this},e.syncElements=function(t){void 0===t&&(t={});var n=this.items,e=this.options,i=e.hideBeforeLoading,r=e.horizontal,o=this.getChildren(),s=ot(this.items.map(function(t){return t.element}),o),a=s.added,u=s.maintained,e=s.changed,s=s.removed,h=[];return u.forEach(function(t){var e=t[0],t=t[1];h[t]=n[e]}),a.forEach(function(t){h[t]=new st(r,{element:o[t],cssRect:i?{top:m,left:m}:{}})}),i&&a.length&&(this.itemRenderer.renderItems(a.map(function(t){return h[t]})),this._refreshContainerContentSize()),this.setItems(h),(a.length||s.length||e.length)&&this.renderItems(t),this},e.updateItems=function(t,e){void 0===t&&(t=this.items);var n=(e=void 0===e?{}:e).useOrgResize;return t.forEach(function(t){var e;n&&((e=t.orgRect).width=0,e.height=0),t.updateState=d.NEED_UPDATE}),this.checkReady(e),this},e.renderItems=function(t){return void 0===t&&(t={}),this._clearRenderTimer(),!this.getItems().length&&this.getChildren().length?this.syncElements(t):t.useResize?(this._resizeContainer(),this.updateItems(this.items,t)):this.checkReady(t),this},e.getStatus=function(e){return{outlines:this.outlines,items:this.items.map(function(t){return e?t.getMinimizedStatus():t.getStatus()}),containerManager:this.containerManager.getStatus(),itemRenderer:this.itemRenderer.getStatus()}},e.setStatus=function(t){var e=this,n=this.options.horizontal,i=this.containerManager,r=i.getInlineSize(),o=this.getChildren();return this.itemRenderer.setStatus(t.itemRenderer),i.setStatus(t.containerManager),this.outlines=t.outlines,this.items=t.items.map(function(t,e){return new st(n,f(f({},t),{element:o[e]}))}),this.itemRenderer.renderItems(this.items),r!==i.getInlineSize()?this.renderItems({useResize:!0}):window.setTimeout(function(){e._renderComplete({direction:e.defaultDirection,mounted:e.items,updated:[],isResize:!1})}),this},e.getComputedOutlineSize=function(t){return void 0===t&&(t=this.items),this.options.outlineSize||this.getContainerInlineSize()},e.getComputedOutlineLength=function(t){return void 0===t&&(t=this.items),this.options.outlineLength||1},e.destroy=function(t){var t=(t=void 0===t?{}:t).preserveUI,t=void 0===t?this.options.preserveUIOnDestroy:t;this.containerManager.destroy({preserveUI:t}),t||this.items.forEach(function(t){var e=t.element,t=t.orgCSSText;e&&(e.style.cssText=t)}),null!==(t=this._im)&&void 0!==t&&t.destroy()},e.checkReady=function(n){var t,i=this;void 0===n&&(n={});var r=this.items,o=r.filter(function(t){var e;return(null===(e=t.element)||void 0===e?void 0:e.parentNode)&&t.updateState!==d.UPDATED}),e=o.filter(function(t){return t.mountState!==h.MOUNTED}),s=[];e.filter(function(t){if(t.hasTransition)return!0;var e=t.element;return 0<parseFloat(getComputedStyle(e).transitionDuration)&&(t.hasTransition=!0,t.transitionDuration=e.style.transitionDuration,!0)}).forEach(function(t){t.element.style.transitionDuration="0s"}),null!==(t=this._im)&&void 0!==t&&t.destroy(),this._im=new q({prefix:this.options.attributePrefix}).on("preReadyElement",function(t){o[t.index].updateState=d.WAIT_LOADING}).on("preReady",function(){o.forEach(function(t){var e=t.orgRect.width,n=t.cssRect.width;e||e===n||(t.element.style.cssText=t.orgCSSText)}),i.itemRenderer.updateItems(o),i.readyItems(e,o,n)}).on("readyElement",function(t){var e=o[t.index];e.updateState=d.NEED_UPDATE,t.isPreReadyOver&&(e.element.style.cssText=e.orgCSSText,i.itemRenderer.updateItems([e]),i.readyItems([],[e],n))}).on("error",function(t){var e=r[t.index];i.trigger("contentError",{element:t.element,target:t.target,item:e,update:function(){s.push(e)}})}).on("ready",function(){s.length&&i.updateItems(s)}).check(o.map(function(t){return t.element}))},e.scheduleRender=function(){var t=this;this._clearRenderTimer(),this._renderTimer=window.setTimeout(function(){t.renderItems()})},e.fitOutlines=function(t){void 0===t&&(t=this.useFit);var e=this.outlines,n=e.start,i=e.end,r=n.length?Math.min.apply(Math,n):0;!t&&0<r||(e.start=n.map(function(t){return t-r}),e.end=i.map(function(t){return t-r}),this.items.forEach(function(t){var e=t.cssContentPos;"number"==typeof e&&(t.cssContentPos=e-r)}))},e.readyItems=function(t,e,n){var i=this.outlines,r=n.direction||this.options.defaultDirection,o=n.outline||i["end"===r?"start":"end"],s=this.items,i={start:g(o),end:g(o)};e.forEach(function(t){t.isUpdate=!0}),s.length&&(i=this.applyGrid(this.items,r,o)),e.forEach(function(t){t.isUpdate=!1}),this.setOutlines(i),this.fitOutlines(),this.itemRenderer.renderItems(this.items),this._refreshContainerContentSize();i=t.filter(function(t){return t.hasTransition});i.length&&(this.containerManager.resize(),i.forEach(function(t){t.element.style.transitionDuration=t.transitionDuration})),this._renderComplete({direction:r,mounted:t,updated:e,isResize:!!n.useResize})},e._renderComplete=function(t){this.trigger("renderComplete",t)},e._clearRenderTimer=function(){clearTimeout(this._renderTimer),this._renderTimer=0},e._refreshContainerContentSize=function(){var t=this.outlines,e=t.start,n=t.end,t=this.options.gap,n=n.length?Math.max.apply(Math,n):0,e=e.length?Math.max.apply(Math,e):0,t=Math.max(e,n-t);this.containerManager.setContentSize(t)},e._resizeContainer=function(){this.containerManager.resize(),this.itemRenderer.setContainerRect(this.containerManager.getRect())},e._init=function(){this._resizeContainer()},t.defaultOptions=p,t.propertyTypes=n,o([B],t)}(t);function ut(t,e,n,i){return Math[i].apply(Math,t.slice(e,e+n))}Y=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(R,t,e){for(var n,v=this.getComputedOutlineSize(R),y=this.getComputedOutlineLength(R),i=this.options,S=i.gap,r=i.align,z=i.columnSizeRatio,E=i.columnSize,i=e.length,P=R.length,C=this._getAlignPoses(y,v),_="end"===t,O=_?"min":"max",T=_?"max":"min",t=[0],I=(t=i===y?e.slice():(n=i?Math[T].apply(Math,e):0,X(y).map(function(){return n}))).slice(),w=1<y?C[1]-C[0]:0,b="stretch"===r,o=function(t){for(var e,n,i,r,o=R[_?t:P-1-t],s=parseInt(o.attributes.column||"1",10),a=parseInt(o.attributes.maxColumn||"1",10),u=o.inlineSize,h=o.contentSize,c=Math.min(y,s||Math.max(1,Math.ceil((u+S)/w))),l=Math.min(y,Math.max(c,a)),f=(n=c,i=O,t=(e=I).length-n+1,r="max"===i?"min":"max",a="max"===i?"lastIndexOf":"indexOf",(t=X(t).map(function(t){return ut(e,t,n,r)}))[a](Math[i].apply(Math,t))),d=ut(I,f,c,T);c<l;){var p=f+c,g=f-1;if(_&&(y<=p||I[p]>d))break;if(!_&&(g<0||I[g])<d)break;_||--f,++c}f=Math.max(0,f),c=Math.min(y-f,c),0<s&&(1<c||b||E)&&(o.cssInlineSize=u=(c-1)*w+v),0<z&&(o.cssContentSize=h=u/z);u=C[f],d=_?d:d-S-h;o.cssInlinePos=u,o.cssContentPos=d;var m=_?d+h+S:d;X(c).forEach(function(t){I[f+t]=m})},s=0;s<P;++s)o(s);return{start:_?t:I,end:_?I:t}},n.getComputedOutlineSize=function(t){void 0===t&&(t=this.items);var e=this.options,n=e.gap,i=e.align,r=this.columnSize||this.outlineSize,o=this.column||this.outlineLength||1,e=0;if("stretch"===i)e=(this.getContainerInlineSize()+n)/(o||1)-n;else if(r)e=r;else if(t.length){for(var s=t[0],a=0,u=t;a<u.length;a++){var h=u[a],c=h.attributes;if(h.updateState===d.UPDATED&&h.inlineSize&&!c.column&&!c.maxColumnCount){s=h;break}}e=s.inlineSize||0}else e=this.getContainerInlineSize();return e||0},n.getComputedOutlineLength=function(t){void 0===t&&(t=this.items);var e=this.gap,n=this.column||this.outlineLength;return n||(n=this.getComputedOutlineSize(t),Math.min(t.length,Math.max(1,Math.floor((this.getContainerInlineSize()+e)/(n+e)))))},n._getAlignPoses=function(t,e){var n=this.options,i=n.align,r=n.gap,o=this.getContainerInlineSize(),s=X(t),a=0,u=0;return"justify"===i||"stretch"===i?(u=(n=t-1)?Math.max((o-e)/n,e+r):0,a=Math.min(0,o/2-(n*u+e)/2)):(e=(t-1)*(u=e+r)+e,"center"===i?a=(o-e)/2:"end"===i&&(a=o-e)),s.map(function(t){return a+t*u})},e.propertyTypes=f(f({},at.propertyTypes),{column:a.RENDER_PROPERTY,columnSize:a.RENDER_PROPERTY,columnSizeRatio:a.RENDER_PROPERTY,align:a.RENDER_PROPERTY}),e.defaultOptions=f(f({},at.defaultOptions),{align:"justify",column:0,columnSize:0,columnSizeRatio:0}),o([B],e)}(at);function ht(t,e,n){return function(t,e){for(var n=[],i=e;i;)n.push(i),i=t[i];return n.reverse(),n}(function(t,e,n){var i={},r={};r[e]=0;var o,s,a,u,h,c,l=new ct(function(t){return t.cost});for(l.push({value:e,cost:0});l.size();)for(var f in s=(o=l.pop()).value,a=o.cost,u=t(s)||{})h=a+u[f],c=r[f],(void 0===r[f]||h<c)&&(r[f]=h,l.push({value:f,cost:h}),i[f]=s);if(void 0!==r[n])return i;throw n=["Could not find a path from ",e," to ",n,"."].join(""),new Error(n)}(t,e,n),n)}var ct=function(){function t(t){this.content=[],this.scoreFunction=t}var e=t.prototype;return e.push=function(t){this.content.push(t),this.bubbleUp(this.content.length-1)},e.pop=function(){var t=this.content[0],e=this.content.pop();return 0<this.content.length&&(this.content[0]=e,this.sinkDown(0)),t},e.size=function(){return this.content.length},e.bubbleUp=function(t){for(var e=t,n=this.content[e];0<e;){var i=Math.floor((e+1)/2)-1,r=this.content[i];if(!(this.scoreFunction(n)<this.scoreFunction(r)))break;this.content[i]=n,this.content[e]=r,e=i}},e.sinkDown=function(t){for(var e=this.content.length,n=this.content[t],i=this.scoreFunction(n);;){var r,o=2*(t+1),s=o-1,a=null;if(s<e&&(r=this.content[s],(r=this.scoreFunction(r))<i&&(a=s)),o<e&&(s=this.content[o],this.scoreFunction(s)<(null==a?i:r)&&(a=o)),null===a)break;this.content[t]=this.content[a],this.content[a]=n,t=a}},t}();function lt(t,e){var n=t.orgInlineSize,i=t.orgContentSize;if(!n||!i)return 0;var r=parseFloat(t.gridData.inlineOffset)||0,t=parseFloat(t.gridData.contentOffset)||0;return(n-r)/Math.max(R,i-t)*(e-t)+r}C=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(t,e,n){var i=this.options,s=i.attributePrefix,a=i.horizontal;t.forEach(function(t){var e,n,i,r,o;t.isUpdate&&(e=t.element,r=t.attributes,n=t.gridData,i=parseFloat(r.inlineOffset)||n.inlineOffset||0,o=parseFloat(r.contentOffset)||0|n.contentOffset,!e||"inlineOffset"in r||"contentOffset"in r||t.mountState!==h.MOUNTED||(r=e.querySelector("["+s+"maintained-target]"))&&(t=e.offsetWidth-e.clientWidth+e.scrollWidth-r.clientWidth,r=e.offsetHeight-e.clientHeight+e.scrollHeight-r.clientHeight,o=a?(i=r,t):(i=t,r)),n.inlineOffset=i,n.contentOffset=o)});var r=this.options.rowRange,i=[];return t.length&&(i=r?this._getRowPath(t):this._getPath(t)),this._setStyle(t,i,n,"end"===e)},n._getRowPath=function(t){var e=this._getColumnRange(),n=this._getRowRange(),n=this._getRowLink(t,{path:[0],cost:0,length:0,currentNode:0},e,n);return null!==(n=null==n?void 0:n.path.map(function(t){return""+t}))&&void 0!==n?n:[]},n._getRowLink=function(t,e,n,i){var r=n[0],o=i[0],s=i[1],a=t.length,u=e.path,h=e.length,c=e.cost,l=e.currentNode;if(l<a&&(s<=h||a<l+r)){r=J(a-l,n)*Math.abs(this._getCost(t,l,a));return f(f({},e),{length:h+1,path:g(u,[a]),currentNode:a,cost:c+r,isOver:!0})}return a<=l?f(f({},e),{currentNode:a,isOver:h<o||s<h}):this._searchRowLink(t,e,a,n,i)},n._searchRowLink=function(t,e,n,i,r){for(var o,s=i[0],a=i[1],u=e.currentNode,h=e.path,c=e.length,l=e.cost,f=Math.min(n,u+a),d=[],p=u+s;p<=f;++p)p!==u&&(o=Math.abs(this._getCost(t,u,p)),(o=this._getRowLink(t,{path:g(h,[p]),length:c+1,cost:l+o,currentNode:p},i,r))&&d.push(o));return d.sort(function(t,e){var n=t.isOver;return n!==e.isOver?n?1:-1:J(t.length,r)-J(e.length,r)||t.cost-e.cost}),d[0]},n._getExpectedRowSize=function(t){var e=this.options.gap,r=this.getContainerInlineSize()-e*(t.length-1),o=0,s=0;return t.forEach(function(t){var e,n=t.orgInlineSize,i=t.orgContentSize;n&&i&&(e=parseFloat(t.gridData.inlineOffset)||0,t=parseFloat(t.gridData.contentOffset)||0,i=(n-e)/Math.max(R,i-t),o+=i,s+=t*i,r-=e)}),o?(r+s)/o:0},n._getExpectedInlineSize=function(t,n){var e=this.options.gap,i=t.reduce(function(t,e){return t+lt(e,n)},0);return i?i+e*(t.length-1):0},n._getCost=function(t,e,n){var i=t.slice(e,n),t=this._getExpectedRowSize(i),e=this._getSizeRange(),n=e[0],e=e[1];if(this.isCroppedSize){if(n<=t&&t<=e)return 0;i=this._getExpectedInlineSize(i,t<n?n:e);return Math.pow(i-this.getContainerInlineSize(),2)}if(isFinite(e)){if(t<n)return Math.pow(t-n,2)+Math.pow(e,2);if(e<t)return Math.pow(t-e,2)+Math.pow(e,2)}else if(t<n)return Math.max(Math.pow(n,2),Math.pow(t,2))+Math.pow(e,2);return t-n},n._getPath=function(o){var s=this,a=o.length,t=this.options.columnRange,t=V(t)?t:[t,t],u=t[0],h=t[1];return ht(function(t){for(var e={},n=parseInt(t,10),i=Math.min(n+u,a);i<=a&&!(h<i-n);++i){var r=s._getCost(o,n,i);r<0&&i===a&&(r=0),e[""+i]=Math.pow(r,2)}return e},"0",""+a)},n._setStyle=function(t,e,n,i){var s=this;void 0===n&&(n=[]);var r=this.options,a=r.gap,u=r.isCroppedSize,h=r.displayedRow,c=this._getSizeRange(),n=n[0]||0,l=this.getContainerInlineSize(),e=function(t,e){for(var n=e.length,i=[],r=0;r<n-1;++r){var o=parseInt(e[r],10),s=parseInt(e[r+1],10);i.push(t.slice(o,s))}return i}(t,e),f=n,d=0;if(e.forEach(function(i,t){var e=i.length,r=s._getExpectedRowSize(i);u&&(r=Math.max(c[0],Math.min(r,c[1])));var n=s._getExpectedInlineSize(i,r),e=a*(e-1),o=(l-e)/(n-e);i.forEach(function(t,e){var n=lt(t,r),e=i[e-1],e=e?e.cssInlinePos+e.cssInlineSize+a:0;u&&(n*=o),t.setCSSGridRect({inlinePos:e,contentPos:f,inlineSize:n,contentSize:r})}),f+=a+r,(h<0||t<h)&&(d=f)}),i)return{start:[n],end:[d]};var o=f-n;return t.forEach(function(t){t.cssContentPos-=o}),{start:[n-o],end:[n]}},n.getComputedOutlineLength=function(){return 1},n.getComputedOutlineSize=function(){return this.getContainerInlineSize()},n._getRowRange=function(){var t=this.rowRange;return V(t)?t:[t,t]},n._getColumnRange=function(){var t=this.columnRange;return V(t)?t:[t,t]},n._getSizeRange=function(){var t=this.sizeRange;return V(t)?t:[t,t]},e.propertyTypes=f(f({},at.propertyTypes),{columnRange:a.RENDER_PROPERTY,rowRange:a.RENDER_PROPERTY,sizeRange:a.RENDER_PROPERTY,isCroppedSize:a.RENDER_PROPERTY,displayedRow:a.RENDER_PROPERTY}),e.defaultOptions=f(f({},at.defaultOptions),{columnRange:[1,8],rowRange:0,sizeRange:[0,1/0],displayedRow:-1,isCroppedSize:!1}),o([B],e)}(at);function ft(t){var e=-1/0;return t.forEach(function(t){isFinite(t)&&(e=Math.max(e,t))}),isFinite(e)?e:0}function dt(t,e,n){return ft(t)+function(t,e,n){var i=t.length;if(!i)return 0;var r=function(t){var e=1/0;return t.forEach(function(t){isFinite(t)&&(e=Math.min(e,t))}),isFinite(e)?e:0}(e),o=ft(t),s=0;if(!n)return 0;for(var a=0;a<i;++a){var u=t[a],h=e[a];isFinite(u)&&isFinite(h)&&(u=u-o,h=h-r,s=a?Math.max(s,s+u-h):u-h)}return s}(t,e,n)}function pt(t,e,n){for(var i=n.inlinePos,r=n.inlineSize,o=n.contentPos,s=n.contentSize,a=i;a<i+r;++a)t[a]=Math.min(t[a],o),e[a]=Math.max(e[a],o+s)}var t=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(t,e,n){var i=this._getFrame(),r=i.inlineSize,o=i.contentSize,s=i.rects,a=this.options,u=a.gap,h=a.useFrameFill,a=this.getRectSize(r),c=a.inlineSize,l=a.contentSize,f=t.length;if(!f||!r||!o)return{start:n,end:n};for(var d=s.length,p=X(r).map(function(){return 1/0}),g=X(r).map(function(){return-1/0}),m=i.outline.map(function(t){return t*(l+u)}),R=0;R<f;R+=d)for(var v=dt(g,m,h),y=0;y<d&&R+y<f;++y){var S=t[R+y],z=s[y],E=z.contentPos,P=z.inlinePos,C=z.contentSize,_=z.inlineSize,O=v+E*(l+u),z=P*(c+u),E=C*(l+u)-u,C=_*(c+u)-u;pt(p,g,{inlinePos:P,inlineSize:_,contentPos:O,contentSize:E+u}),S.setCSSGridRect({inlinePos:z,contentPos:O,inlineSize:C,contentSize:E})}var T,e="end"===e,n=n.length?n:[0];n.length!==r&&(T=(e?Math.max:Math.min).apply(Math,n),n=X(r).map(function(){return T}));var p=p.map(function(t){return isFinite(t)?t:0}),g=g.map(function(t){return isFinite(t)?t:0}),I=e?dt(n,p,h):dt(g,n,h);return t.forEach(function(t){t.cssContentPos+=I}),{start:p.map(function(t){return t+I}),end:g.map(function(t){return t+I})}},n.getComputedOutlineLength=function(){var t=this.options.frame;return t.length?t[0].length:0},n.getComputedOutlineSize=function(){var t=this.options,e=t.gap,t=t.rectSize;return"object"==typeof t?t.inlineSize:t||(this.getContainerInlineSize()+e)/this.getComputedOutlineLength()-e},n.getRectSize=function(t){var e=this.options,n=e.gap,e=e.rectSize;if("object"==typeof e)return e;n=e||(this.getContainerInlineSize()+n)/t-n;return{inlineSize:n,contentSize:n}},n._getFrame=function(){for(var t=this.options.frame,e=t.length,n=e?t[0].length:0,i=[],r={},o=X(n).map(function(){return 1/0}),s=X(n).map(function(){return-1/0}),a=0;a<e;++a)for(var u=0;u<n;++u){var h=t[a][u];h&&(r[a+","+u]||(pt(o,s,h=this._findRect(r,h,a,u,n,e)),i.push(h)))}return i.sort(function(t,e){return t.type<e.type?-1:1}),{rects:i,inlineSize:n,contentSize:e,outline:o}},n._findRect=function(t,e,n,i,r,o){for(var s=this.options.frame,a=1,u=1,h=i;h<r&&s[n][h]===e;++h)u=h-i+1;for(var c=n;c<o&&s[c][i]===e;++c)a=c-n+1;for(var l=n;l<n+a;++l)for(var f=i;f<i+u;++f)t[l+","+f]=!0;return{type:e,inlinePos:i,contentPos:n,inlineSize:u,contentSize:a}},e.propertyTypes=f(f({},at.propertyTypes),{frame:a.RENDER_PROPERTY,useFrameFill:a.RENDER_PROPERTY,rectSize:a.RENDER_PROPERTY}),e.defaultOptions=f(f({},at.defaultOptions),{frame:[],rectSize:0,useFrameFill:!0}),o([B],e)}(at),gt=function(){function t(t){var e,n=f({orgInlineSize:0,orgContentSize:0,inlineSize:0,contentSize:0,inlinePos:0,contentPos:0,items:[]},t);for(e in n)this[e]=n[e]}var e=t.prototype;return e.scaleTo=function(t,e){var n=this.inlineSize?t/this.inlineSize:0,i=this.contentSize?e/this.contentSize:0;this.items.forEach(function(t){0!=n&&(t.inlinePos*=n,t.inlineSize*=n),0!=i&&(t.contentPos*=i,t.contentSize*=i)}),this.inlineSize=t,this.contentSize=e},e.push=function(t){this.items.push(t)},e.getOrgSizeWeight=function(){return this.orgInlineSize*this.orgContentSize},e.getSize=function(){return this.inlineSize*this.contentSize},e.getOrgRatio=function(){return 0===this.orgContentSize?0:this.orgInlineSize/this.orgContentSize},e.getRatio=function(){return 0===this.contentSize?0:this.inlineSize/this.contentSize},t}();function mt(t,e){e=t/e;return(e=e<1?1/e:e)-1}var Rt,vt={__proto__:null,default:at,GetterSetter:B,withGridMethods:P,withMethods:K,MasonryGrid:Y,JustifiedGrid:C,FrameGrid:t,PackingGrid:function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(t,e,n){var i=this,r=this.options,o=r.aspectRatio,s=r.gap,a=this.getContainerInlineSize(),u=a/o,n=n.length?n:[0],h="end"===e?Math.max.apply(Math,n):Math.min.apply(Math,n)-u-s,n=h+u+s,c=new gt({});return t.forEach(function(t){t=new gt({inlineSize:t.orgInlineSize,contentSize:t.orgContentSize,orgInlineSize:t.orgInlineSize,orgContentSize:t.orgContentSize});i._findBestFitArea(c,t),c.push(t),c.scaleTo(a+s,u+s)}),t.forEach(function(t,e){var n=c.items[e],i=n.inlineSize-s,r=n.contentSize-s,e=h+n.contentPos,n=n.inlinePos;t.setCSSGridRect({inlinePos:n,contentPos:e,inlineSize:i,contentSize:r})}),{start:[h],end:[n]}},n._findBestFitArea=function(t,p){if(0===t.getRatio())return t.orgInlineSize=p.inlineSize,t.orgContentSize=p.contentSize,t.inlineSize=p.inlineSize,void(t.contentSize=p.contentSize);var g,e,n,i,r,m=1/0,R=!1,v={inlineSize:0,contentSize:0},y={inlineSize:0,contentSize:0},S=this._getWeight("size"),z=this._getWeight("ratio");t.items.forEach(function(t){for(var e=mt(t.getOrgSizeWeight(),t.getSize())*S,n=mt(t.getOrgRatio(),t.getRatio())*z,i=t.inlineSize,r=t.contentSize,o=0;o<2;++o){var s=void 0,a=void 0,u=void 0,h=void 0;0===o?(u=s=i,h=r-(a=r*(p.contentSize/(t.orgContentSize+p.contentSize)))):(h=a=r,u=i-(s=i*(p.inlineSize/(t.orgInlineSize+p.inlineSize))));var c=s*a,l=s/a,f=u*h,d=h/h,c=mt(p.getSize(),c)*S;c+=mt(p.getRatio(),l)*z,c+=mt(t.getOrgSizeWeight(),f)*S-e,(c+=mt(t.getOrgRatio(),d)*z-n)===Math.min(c,m)&&(m=c,g=t,R=0===o,v.inlineSize=s,v.contentSize=a,y.inlineSize=u,y.contentSize=h)}}),e=g,n=v,i=y,r=R,(t=p).contentSize=n.contentSize,t.inlineSize=n.inlineSize,e.contentSize=i.contentSize,e.inlineSize=i.inlineSize,r?(t.contentPos=e.contentPos+e.contentSize,t.inlinePos=e.inlinePos):(t.inlinePos=e.inlinePos+e.inlineSize,t.contentPos=e.contentPos)},n.getComputedOutlineLength=function(){return 1},n.getComputedOutlineSize=function(){return this.getContainerInlineSize()},n._getWeight=function(t){var e=this.options,n=e.weightPriority;return n===t?100:"custom"===n?e[t+"Weight"]:1},e.propertyTypes=f(f({},at.propertyTypes),{aspectRatio:a.RENDER_PROPERTY,sizeWeight:a.RENDER_PROPERTY,ratioWeight:a.RENDER_PROPERTY,weightPriority:a.RENDER_PROPERTY}),e.defaultOptions=f(f({},at.defaultOptions),{aspectRatio:1,sizeWeight:1,ratioWeight:1,weightPriority:"custom"}),o([B],e)}(at),ItemRenderer:Q,GridItem:st,ContainerManager:y,DEFAULT_GRID_OPTIONS:p,INVISIBLE_POS:m,MINIMUM_NUMBER:R,get PROPERTY_TYPE(){return a},get MOUNT_STATE(){return h},get UPDATE_STATE(){return d},GRID_PROPERTY_TYPES:n,GRID_METHODS:e,GRID_EVENTS:["renderComplete","contentError"],RECT_NAMES:v};for(Rt in vt)at[Rt]=vt[Rt];return at});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Grid=e()}(this,function(){"use strict";var i=function(t,e){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var d=function(){return(d=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function o(t,e,n,i){var r,o=arguments.length,s=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;0<=a;a--)(r=t[a])&&(s=(o<3?r(s):3<o?r(e,n,s):r(e,n))||s);return 3<o&&s&&Object.defineProperty(e,n,s),s}function g(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var i=Array(t),r=0,e=0;e<n;e++)for(var o=arguments[e],s=0,a=o.length;s<a;s++,r++)i[r]=o[s];return i}function c(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],i=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return{value:(t=t&&i>=t.length?void 0:t)&&t[i++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var i,r,o=n.call(t),s=[];try{for(;(void 0===e||0<e--)&&!(i=o.next()).done;)s.push(i.value)}catch(t){r={error:t}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(r)throw r.error}}return s}(arguments[e]));return t}function l(t){return void 0===t}var a,p,m,u=function(){function t(t,e){var n,i;if(this.eventType=t,this._canceled=!1,e)try{for(var r=c(Object.keys(e)),o=r.next();!o.done;o=r.next()){var s=o.value;this[s]=e[s]}}catch(t){n={error:t}}finally{try{o&&!o.done&&(i=r.return)&&i.call(r)}finally{if(n)throw n.error}}}var e=t.prototype;return e.stop=function(){this._canceled=!0},e.isCanceled=function(){return this._canceled},t}(),t=function(){function t(){this._eventHandler={}}var e=t.prototype;return e.trigger=function(e){for(var n=[],t=1;t<arguments.length;t++)n[t-1]=arguments[t];var i=e instanceof u?e.eventType:e,i=s(this._eventHandler[i]||[]);return i.length<=0||(e instanceof u?(e.currentTarget=this,i.forEach(function(t){t(e)})):i.forEach(function(t){t.apply(void 0,s(n))})),this},e.once=function(n,i){var r,o=this;if("object"==typeof n&&l(i)){var t,e=n;for(t in e)this.once(t,e[t]);return this}return"string"==typeof n&&"function"==typeof i&&this.on(n,r=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];i.apply(void 0,s(t)),o.off(n,r)}),this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&l(e)){var n,i=t;for(n in i)this.on(n,i[n]);return this}var r;return"string"==typeof t&&"function"==typeof e&&(r=this._eventHandler[t],l(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)),this},e.off=function(t,e){var n,i;if(l(t))return this._eventHandler={},this;if(l(e)){if("string"==typeof t)return delete this._eventHandler[t],this;var r,o=t;for(r in o)this.off(r,o[r]);return this}var s=this._eventHandler[t];if(s){var a=0;try{for(var u=c(s),h=u.next();!h.done;h=u.next()){if(h.value===e){s.splice(a,1),s.length<=0&&delete this._eventHandler[t];break}a++}}catch(t){n={error:t}}finally{try{h&&!h.done&&(i=u.return)&&i.call(u)}finally{if(n)throw n.error}}}return this},t.VERSION="3.0.1",t}(),h=u,R={horizontal:!1,useTransform:!1,percentage:!1,isEqualSize:!1,isConstantSize:!1,gap:0,attributePrefix:"data-grid-",resizeDebounce:100,maxResizeDebounce:0,autoResize:!0,preserveUIOnDestroy:!1,defaultDirection:"end",externalContainerManager:null,externalItemRenderer:null,renderOnPropertyChange:!0,useFit:!0,outlineLength:0,outlineSize:0,useRoundedSize:!0};(E=a=a||{})[E.PROPERTY=1]="PROPERTY",E[E.RENDER_PROPERTY=2]="RENDER_PROPERTY",(P=p=p||{})[P.UNCHECKED=1]="UNCHECKED",P[P.UNMOUNTED=2]="UNMOUNTED",P[P.MOUNTED=3]="MOUNTED",(j=m=m||{})[j.NEED_UPDATE=1]="NEED_UPDATE",j[j.WAIT_LOADING=2]="WAIT_LOADING",j[j.UPDATED=3]="UPDATED";var n={gap:a.RENDER_PROPERTY,defaultDirection:a.PROPERTY,renderOnPropertyChange:a.PROPERTY,preserveUIOnDestroy:a.PROPERTY,useFit:a.PROPERTY,outlineSize:a.RENDER_PROPERTY,outlineLength:a.RENDER_PROPERTY},e=["syncElements","updateItems","getItems","setItems","renderItems","getContainerInlineSize","getContainerElement"],f={horizontal:{inlinePos:"top",contentPos:"left",inlineSize:"height",contentSize:"width"},vertical:{inlinePos:"left",contentPos:"top",inlineSize:"width",contentSize:"height"}},v=function(i){function t(t,e){var n=i.call(this)||this;return n.container=t,n._resizeTimer=0,n._maxResizeDebounceTimer=0,n._onResize=function(){clearTimeout(n._resizeTimer),clearTimeout(n._maxResizeDebounceTimer),n._maxResizeDebounceTimer=0,n._resizeTimer=0,n.trigger("resize")},n._scheduleResize=function(){var t=n.options,e=t.resizeDebounce,t=t.maxResizeDebounce;!n._maxResizeDebounceTimer&&e<=t&&(n._maxResizeDebounceTimer=window.setTimeout(n._onResize,t)),n._resizeTimer&&(clearTimeout(n._resizeTimer),n._resizeTimer=0),n._resizeTimer=window.setTimeout(n._onResize,e)},n.options=d({horizontal:R.horizontal,autoResize:R.autoResize,resizeDebounce:R.resizeDebounce,maxResizeDebounce:R.maxResizeDebounce},e),n._init(),n}r(t,i);var e=t.prototype;return e.resize=function(){var t=this.container;this.setRect({width:t.clientWidth,height:t.clientHeight})},e.getRect=function(){return this.rect},e.setRect=function(t){this.rect=d({},t)},e.getInlineSize=function(){return this.rect[this.options.horizontal?"height":"width"]},e.getContentSize=function(){return this.rect[this.options.horizontal?"width":"height"]},e.getStatus=function(){return{rect:d({},this.rect)}},e.setStatus=function(t){this.rect=d({},t.rect),this.setContentSize(this.getContentSize())},e.setContentSize=function(t){var e=this.options.horizontal?"width":"height";this.rect[e]=t,this.container.style[e]=t+"px"},e.destroy=function(t){void 0===t&&(t={}),window.removeEventListener("resize",this._scheduleResize),t.preserveUI||(this.container.style.cssText=this.orgCSSText)},e._init=function(){var t=this.container,e=window.getComputedStyle(t);this.orgCSSText=t.style.cssText,"static"===e.position&&(t.style.position="relative"),this.options.autoResize&&window.addEventListener("resize",this._scheduleResize)},t}(t),y=function(t,e){return(y=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function S(t,e){function n(){this.constructor=t}y(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var z=function(){return(z=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};var E="undefined"!=typeof window,P=E?window.navigator.userAgent:"",C=E&&!!("getComputedStyle"in window),_=/MSIE|Trident|Windows Phone|Edge/.test(P),O=E&&!!("addEventListener"in document),T="width",w="height";function I(t,e){return t.getAttribute(e)||""}function D(t){return[].slice.call(t)}function b(t,e){return void 0===e&&(e="data-"),"loading"in t&&"lazy"===t.getAttribute("loading")||!!t.getAttribute(e+"lazy")}function x(t,e,n){O?t.addEventListener(e,n,!1):t.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function M(t,e,n){t.removeEventListener?t.removeEventListener(e,n,!1):t.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function k(t,e){var n=t["client"+e]||t["offset"+e];return parseFloat(n||(t=t,((C?window.getComputedStyle(t):t.currentStyle)||{})[e.toLowerCase()]))||0}function N(t,e,n){var i=D(t.querySelectorAll(function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var i=Array(t),r=0,e=0;e<n;e++)for(var o=arguments[e],s=0,a=o.length;s<a;s++,r++)i[r]=o[s];return i}(["["+n+"skip] ["+n+"width]"],e.map(function(t){return["["+n+"skip] "+t,t+"["+n+"skip]","["+n+"width] "+t].join(", ")})).join(", ")));return D(t.querySelectorAll("["+n+"width], "+e.join(", "))).filter(function(t){return-1===i.indexOf(t)})}var A=[];function L(t,e){A.length||x(window,"resize",U),t.__PREFIX__=e,A.push(t),F(t)}function F(t,e){void 0===e&&(e="data-");var n,i=t.__PREFIX__||e,r=parseInt(I(t,""+i+T),10)||0,e=parseInt(I(t,""+i+w),10)||0;I(t,i+"fixed")===w?(n=k(t,"Height")||e,t.style[T]=r/e*n+"px"):(n=k(t,"Width")||r,t.style[w]=e/r*n+"px")}function U(){A.forEach(function(t){F(t)})}var j=function(r){function t(t,e){void 0===e&&(e={});var n=r.call(this)||this;n.isReady=!1,n.isPreReady=!1,n.hasDataSize=!1,n.hasLoading=!1,n.isSkip=!1,n.onCheck=function(t){n.clear(),t&&"error"===t.type&&n.onError(n.element),n.hasLoading&&n.checkElement()||(t=!n.hasDataSize&&!n.hasLoading,n.onReady(t))},n.options=z({prefix:"data-"},e),n.element=t;var i=n.options.prefix;return n.hasDataSize=(e=i,!!t.getAttribute((e=void 0===e?"data-":e)+"width")),n.isSkip=(e=i,!!t.getAttribute((e=void 0===e?"data-":e)+"skip")),n.hasLoading=b(t,i),n}S(t,r);var e=t.prototype;return e.check=function(){return this.isSkip||!this.checkElement()?(this.onAlreadyReady(!0),!1):(this.hasDataSize&&L(this.element,this.options.prefix),(this.hasDataSize||this.hasLoading)&&this.onAlreadyPreReady(),!0)},e.addEvents=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){x(n,t,e.onCheck)})},e.clear=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){M(n,t,e.onCheck)}),this.removeAutoSizer()},e.destroy=function(){this.clear(),this.off()},e.removeAutoSizer=function(){var t,e,n;this.hasDataSize&&(n=this.options.prefix,t=this.element,e=n,(n=A.indexOf(t))<0||(e=I(t,e+"fixed"),delete t.__PREFIX__,t.style[e===w?T:w]="",A.splice(n,1),A.length||M(window,"resize",U)))},e.onError=function(t){this.trigger("error",{element:this.element,target:t})},e.onPreReady=function(){this.isPreReady||(this.isPreReady=!0,this.trigger("preReady",{element:this.element,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onReady=function(t){this.isReady||((t=!this.isPreReady&&t)&&(this.isPreReady=!0),this.removeAutoSizer(),this.isReady=!0,this.trigger("ready",{element:this.element,withPreReady:t,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onAlreadyError=function(t){var e=this;setTimeout(function(){e.onError(t)})},e.onAlreadyPreReady=function(){var t=this;setTimeout(function(){t.onPreReady()})},e.onAlreadyReady=function(t){var e=this;setTimeout(function(){e.onReady(t)})},t.EVENTS=[],t}(t),Y=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}S(e,t);var n=e.prototype;return n.setHasLoading=function(t){this.hasLoading=t},n.check=function(){return this.isSkip?(this.onAlreadyReady(!0),!1):(this.hasDataSize?(L(this.element,this.options.prefix),this.onAlreadyPreReady()):this.trigger("requestChildren"),!0)},n.checkElement=function(){return!0},n.destroy=function(){this.clear(),this.trigger("requestDestroy"),this.off()},n.onAlreadyPreReady=function(){t.prototype.onAlreadyPreReady.call(this),this.trigger("reqeustReadyChildren")},e.EVENTS=[],e}(j),P=function(n){function t(t){void 0===t&&(t={});var e=n.call(this)||this;return e.readyCount=0,e.preReadyCount=0,e.totalCount=0,e.totalErrorCount=0,e.isPreReadyOver=!0,e.elementInfos=[],e.options=z({loaders:{},prefix:"data-"},t),e}S(t,n);var e=t.prototype;return e.check=function(t){var o=this,n=this.options.prefix;this.clear(),this.elementInfos=D(t).map(function(t,r){var e=o.getLoader(t,{prefix:n});return e.check(),e.on("error",function(t){o.onError(r,t.target)}).on("preReady",function(t){var e=o.elementInfos[r];e.hasLoading=t.hasLoading,e.isSkip=t.isSkip;t=o.checkPreReady(r);o.onPreReadyElement(r),t&&o.onPreReady()}).on("ready",function(t){var e=t.withPreReady,n=t.hasLoading,i=t.isSkip,t=o.elementInfos[r];t.hasLoading=n,t.isSkip=i;t=e&&o.checkPreReady(r),i=o.checkReady(r);e&&o.onPreReadyElement(r),o.onReadyElement(r),t&&o.onPreReady(),i&&o.onReady()}),{loader:e,element:t,hasLoading:!1,hasError:!1,isPreReady:!1,isReady:!1,isSkip:!1}});t=this.elementInfos.length;return(this.totalCount=t)||setTimeout(function(){o.onPreReady(),o.onReady()}),this},e.getTotalCount=function(){return this.totalCount},e.isPreReady=function(){return this.elementInfos.every(function(t){return t.isPreReady})},e.isReady=function(){return this.elementInfos.every(function(t){return t.isReady})},e.hasError=function(){return 0<this.totalErrorCount},e.clear=function(){this.isPreReadyOver=!1,this.totalCount=0,this.preReadyCount=0,this.readyCount=0,this.totalErrorCount=0,this.elementInfos.forEach(function(t){!t.isReady&&t.loader&&t.loader.destroy()}),this.elementInfos=[]},e.destroy=function(){this.clear(),this.off()},e.getLoader=function(e,t){var n=this,i=e.tagName.toLowerCase(),r=this.options.loaders,o=t.prefix,s=Object.keys(r);if(r[i])return new r[i](e,t);var a=new Y(e,t),u=D(e.querySelectorAll(s.join(", ")));a.setHasLoading(u.some(function(t){return b(t,o)}));var h=!1,c=this.clone().on("error",function(t){a.onError(t.target)}).on("ready",function(){a.onReady(h)});return a.on("requestChildren",function(){var t=N(e,s,n.options.prefix);c.check(t).on("preReady",function(t){(h=t.isReady)||a.onPreReady()})}).on("reqeustReadyChildren",function(){c.check(u)}).on("requestDestroy",function(){c.destroy()}),a},e.clone=function(){return new t(z({},this.options))},e.checkPreReady=function(t){return this.elementInfos[t].isPreReady=!0,++this.preReadyCount,!(this.preReadyCount<this.totalCount)},e.checkReady=function(t){return this.elementInfos[t].isReady=!0,++this.readyCount,!(this.readyCount<this.totalCount)},e.onError=function(t,e){var n=this.elementInfos[t];n.hasError=!0,this.trigger(new h("error",{element:n.element,index:t,target:e,errorCount:this.getErrorCount(),totalErrorCount:++this.totalErrorCount}))},e.onPreReadyElement=function(t){var e=this.elementInfos[t];this.trigger(new h("preReadyElement",{element:e.element,index:t,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isSkip:e.isSkip}))},e.onPreReady=function(){this.isPreReadyOver=!0,this.trigger(new h("preReady",{readyCount:this.readyCount,totalCount:this.totalCount,isReady:this.isReady(),hasLoading:this.hasLoading()}))},e.onReadyElement=function(t){var e=this.elementInfos[t];this.trigger(new h("readyElement",{index:t,element:e.element,hasError:e.hasError,errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isPreReadyOver:this.isPreReadyOver,isSkip:e.isSkip}))},e.onReady=function(){this.trigger(new h("ready",{errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,totalCount:this.totalCount}))},e.getErrorCount=function(){return this.elementInfos.filter(function(t){return t.hasError}).length},e.hasLoading=function(){return this.elementInfos.some(function(t){return t.hasLoading})},t}(t),G=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return S(e,t),e.prototype.checkElement=function(){var t=this.element,e=t.getAttribute("src");if(t.complete){if(e)return t.naturalWidth||this.onAlreadyError(t),!1;this.onAlreadyPreReady()}return this.addEvents(),_&&t.setAttribute("src",e),!0},e.EVENTS=["load","error"],e}(j),H=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return S(e,t),e.prototype.checkElement=function(){var t=this.element;return!(1<=t.readyState)&&(t.error?(this.onAlreadyError(t),!1):(this.addEvents(),!0))},e.EVENTS=["loadedmetadata","error"],e}(j),W=function(e){function t(t){return e.call(this,z({loaders:{img:G,video:H}},t=void 0===t?{}:t))||this}return S(t,e),t}(P);function q(t){return"object"==typeof t}function V(t){var e,r=t.prototype,o=t.propertyTypes;for(e in o)!function(n){var i=o[n]===a.RENDER_PROPERTY,t=Object.getOwnPropertyDescriptor(r,n)||{};Object.defineProperty(r,n,{enumerable:!0,configurable:!0,get:t.get||function(){return this.options[n]},set:t.set||function(t){var e=this.options;e[n]!==t&&(e[n]=t,i&&e.renderOnPropertyChange&&this.scheduleRender())}})}(e)}function K(e){return function(t,r){e.forEach(function(i){i in t||(t[i]=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n=(n=this[r])[i].apply(n,t);return n===this[r]?this:n})})}}function B(t){for(var e=[],n=0;n<t;++n)e.push(n);return e}function X(t,e){return Math.max(t-e[1],e[0]-t,0)+1}var E=K(e),J=function(){function t(t){this.initialRect=null,this.sizePercetage=!1,this.posPercetage=!1,this.options=d({attributePrefix:R.attributePrefix,useTransform:R.useTransform,horizontal:R.horizontal,percentage:R.percentage,isEqualSize:R.isEqualSize,isConstantSize:R.isConstantSize,useRoundedSize:R.useRoundedSize},t),this._init()}var e=t.prototype;return e.resize=function(){this.initialRect=null},e.renderItems=function(t){var e=this;t.forEach(function(t){e._renderItem(t)})},e.getInlineSize=function(){return this.containerRect[this.options.horizontal?"height":"width"]},e.setContainerRect=function(t){this.containerRect=t},e.updateItems=function(t){var e=this;t.forEach(function(t){e._updateItem(t)})},e.getStatus=function(){return{initialRect:this.initialRect}},e.setStatus=function(t){this.initialRect=t.initialRect},e._init=function(){var t=this.options.percentage,e=!1,n=!1;!0===t?n=e=!0:t&&(-1<t.indexOf("position")&&(n=!0),-1<t.indexOf("size")&&(e=!0)),this.posPercetage=n,this.sizePercetage=e},e._updateItem=function(t){var e=this.options,n=e.isEqualSize,i=e.isConstantSize,r=e.useRoundedSize,o=this.initialRect,s=t.orgRect,a=t.element,u=t.updateState===m.WAIT_LOADING,e=s&&s.width&&s.height;if(n&&o)h=o;else if(i&&e&&!u)h=s;else{if(!a)return;var h={left:a.offsetLeft,top:a.offsetTop,width:0,height:0};r?(h.width=a.offsetWidth,h.height=a.offsetHeight):(r=a.getBoundingClientRect(),h.width=r.width,h.height=r.height)}return t.isFirstUpdate&&e||(t.orgRect=d({},h)),t.rect=d({},h),t.element&&(t.mountState=p.MOUNTED),t.updateState===m.NEED_UPDATE&&(t.updateState=m.UPDATED,t.isFirstUpdate=!0),t.attributes=a?function(t,e){for(var n={},i=t.attributes,r=i.length,o=0;o<r;++o){var s=i[o],a=s.name,s=s.value;-1!==a.indexOf(e)&&(n[a.replace(e,"").replace(/[\s-_]([a-z])/g,function(t,e){return e.toUpperCase()})]=s)}return n}(a,this.options.attributePrefix):{},u||(this.initialRect=d({},h)),h},e._renderItem=function(t){var n,i,e,r,o,s,a,u=t.element,h=t.cssRect;u&&h&&(a=(e=this.options).horizontal,t=e.useTransform,n=this.posPercetage,i=this.sizePercetage,e=["position: absolute;"],r=(a=f[a?"horizontal":"vertical"]).inlineSize,o=a.inlinePos,s=this.getInlineSize(),a=h,a=Object.keys(a),t&&(a=a.filter(function(t){return"top"!==t&&"left"!==t}),e.push("transform: translate("+(h.left||0)+"px, "+(h.top||0)+"px);")),e.push.apply(e,a.map(function(t){var e=h[t];return t===r&&i||t===o&&n?t+": "+e/s*100+"%;":t+": "+e+"px;"})),u.style.cssText+=e.join(""))},t}(),Q=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var n=this.keys,i=this.values,r=n.indexOf(t),r=-1===r?n.length:r;n[r]=t,i[r]=e},t}(),Z=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),$="function"==typeof Map,tt=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var et=function(){function t(t,e,n,i,r,o,s,a){this.prevList=t,this.list=e,this.added=n,this.removed=i,this.changed=r,this.maintained=o,this.changedBeforeAdded=s,this.fixed=a}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t,n,r,o,t=(t=this.changedBeforeAdded,n=this.fixed,r=[],o=[],t.forEach(function(t){var e=t[0],n=t[1],t=new tt;r[e]=t,o[n]=t}),r.forEach(function(t,e){t.connect(r[e-1])}),t.filter(function(t,e){return!n[e]}).map(function(t,e){var n=t[0],i=t[1];if(n===i)return[0,0];t=r[n],n=o[i-1],i=t.getIndex();return t.disconnect(),n?t.connect(n,n.next):t.connect(void 0,r[0]),[i,t.getIndex()]})),s=this.changed,a=[];this.cacheOrdered=t.filter(function(t,e){var n=t[0],i=t[1],t=s[e],e=t[0],t=t[1];if(n!==i)return a.push([e,t]),!0}),this.cachePureChanged=a},t}();var nt,it="function"==typeof Map?void 0:(nt=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++nt)});function rt(t,e){return n=t,i=e,r=it,t=$?Map:r?Z:Q,e=r||function(t){return t},o=[],s=[],a=[],r=n.map(e),e=i.map(e),u=new t,h=new t,c=[],l=[],f={},d=[],g=p=0,r.forEach(function(t,e){u.set(t,e)}),e.forEach(function(t,e){h.set(t,e)}),r.forEach(function(t,e){t=h.get(t);void 0===t?(++g,s.push(e)):f[t]=g}),e.forEach(function(t,e){t=u.get(t);void 0===t?(o.push(e),++p):(a.push([t,e]),g=f[e]||0,c.push([t-g,e-p]),l.push(e===t),t!==e&&d.push([t,e]))}),s.reverse(),new et(n,i,o,s,d,a,c,l);var n,i,r,o,s,a,u,h,c,l,f,d,p,g}var ot=function(){function t(t,e){void 0===e&&(e={}),this.horizontal=t,this.isUpdate=!1,this.hasTransition=!1,this.transitionDuration="";var n,t=e.element,i=d({key:"",orgRect:{left:0,top:0,width:0,height:0},rect:{left:0,top:0,width:0,height:0},cssRect:{},attributes:{},data:{},isFirstUpdate:!1,mountState:p.UNCHECKED,updateState:m.NEED_UPDATE,element:t||null,orgCSSText:null!==(t=null==t?void 0:t.style.cssText)&&void 0!==t?t:"",gridData:{}},e);for(n in i)this[n]=i[n]}var e=t.prototype;return Object.defineProperty(e,"orgInlineSize",{get:function(){var t=this.orgRect,e=this.rect;return this.horizontal?t.height||e.height:t.width||e.width},enumerable:!1,configurable:!0}),Object.defineProperty(e,"orgContentSize",{get:function(){var t=this.orgRect,e=this.rect;return this.horizontal?t.width||e.width:t.height||e.height},enumerable:!1,configurable:!0}),Object.defineProperty(e,"inlineSize",{get:function(){var t=this.rect;return this.horizontal?t.height:t.width},enumerable:!1,configurable:!0}),Object.defineProperty(e,"contentSize",{get:function(){var t=this.rect;return this.horizontal?t.width:t.height},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssInlineSize",{get:function(){var t=this.cssRect;return this.horizontal?t.height:t.width},set:function(t){this.cssRect[this.horizontal?"height":"width"]=t},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssContentSize",{get:function(){var t=this.cssRect;return this.horizontal?t.width:t.height},set:function(t){this.cssRect[this.horizontal?"width":"height"]=t},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssInlinePos",{get:function(){var t=this.cssRect;return this.horizontal?t.top:t.left},set:function(t){this.cssRect[this.horizontal?"top":"left"]=t},enumerable:!1,configurable:!0}),Object.defineProperty(e,"cssContentPos",{get:function(){var t=this.cssRect;return this.horizontal?t.left:t.top},set:function(t){this.cssRect[this.horizontal?"left":"top"]=t},enumerable:!1,configurable:!0}),e.setCSSGridRect=function(t){var e,n=f[this.horizontal?"horizontal":"vertical"],i={};for(e in t)i[n[e]]=t[e];this.cssRect=i},e.getStatus=function(){return{mountState:this.mountState,updateState:this.updateState,attributes:this.attributes,orgCSSText:this.orgCSSText,isFirstUpdate:this.isFirstUpdate,element:null,key:this.key,orgRect:this.orgRect,rect:this.rect,cssRect:this.cssRect,gridData:this.gridData,data:this.data}},e.getMinimizedStatus=function(){var t={orgRect:this.orgRect,rect:this.rect,cssRect:this.cssRect,attributes:this.attributes,gridData:this.gridData},e=this,n=e.key,i=e.mountState,r=e.updateState,o=e.isFirstUpdate,e=e.orgCSSText;return void 0!==n&&(t.key=n),i!==p.UNCHECKED&&(t.mountState=i),r!==m.NEED_UPDATE&&(t.updateState=r),o&&(t.isFirstUpdate=!0),e&&(t.orgCSSText=e),t},t}(),st=function(f){function t(t,e){void 0===e&&(e={});var n=f.call(this)||this;n.items=[],n.outlines={start:[],end:[]},n._renderTimer=0,n._onResize=function(){n.renderItems({useResize:!0})},n.options=d(d({},n.constructor.defaultOptions),e),n.containerElement="string"==typeof t?document.querySelector(t):t;var i=n.options,r=i.isEqualSize,o=i.isConstantSize,s=i.useTransform,a=i.horizontal,u=i.percentage,h=i.externalContainerManager,c=i.externalItemRenderer,l=i.resizeDebounce,e=i.maxResizeDebounce,t=i.autoResize,i=i.useRoundedSize;return n.containerManager=h||new v(n.containerElement,{horizontal:a,resizeDebounce:l,maxResizeDebounce:e,autoResize:t}).on("resize",n._onResize),n.itemRenderer=c||new J({useTransform:s,isEqualSize:r,isConstantSize:o,percentage:u,useRoundedSize:i}),n._init(),n}r(t,f);var e=t.prototype;return e.getContainerElement=function(){return this.containerElement},e.getItems=function(){return this.items},e.getChildren=function(){return[].slice.call(this.containerElement.children)},e.setItems=function(t){return this.items=t,this},e.getContainerInlineSize=function(){return this.containerManager.getInlineSize()},e.getOutlines=function(){return this.outlines},e.setOutlines=function(t){return this.outlines=t,this},e.syncElements=function(t){void 0===t&&(t={});var n=this.items,e=this.options.horizontal,i=this.getChildren(),r=rt(this.items.map(function(t){return t.element}),i),o=r.added,s=r.maintained,a=r.changed,r=r.removed,u=[];return s.forEach(function(t){var e=t[0],t=t[1];u[t]=n[e]}),o.forEach(function(t){u[t]=new ot(e,{element:i[t]})}),this.setItems(u),(o.length||r.length||a.length)&&this.renderItems(t),this},e.updateItems=function(t,e){void 0===t&&(t=this.items);var n=(e=void 0===e?{}:e).useOrgResize;return t.forEach(function(t){var e;n&&((e=t.orgRect).width=0,e.height=0),t.updateState=m.NEED_UPDATE}),this.checkReady(e),this},e.renderItems=function(t){return void 0===t&&(t={}),this._clearRenderTimer(),!this.getItems().length&&this.getChildren().length?this.syncElements(t):t.useResize||t.useOrgResize?(this._resizeContainer(),this.updateItems(this.items,t)):this.checkReady(t),this},e.getStatus=function(e){return{outlines:this.outlines,items:this.items.map(function(t){return e?t.getMinimizedStatus():t.getStatus()}),containerManager:this.containerManager.getStatus(),itemRenderer:this.itemRenderer.getStatus()}},e.setStatus=function(t){var e=this,n=this.options.horizontal,i=this.containerManager,r=i.getInlineSize(),o=this.getChildren();return this.itemRenderer.setStatus(t.itemRenderer),i.setStatus(t.containerManager),this.outlines=t.outlines,this.items=t.items.map(function(t,e){return new ot(n,d(d({},t),{element:o[e]}))}),this.itemRenderer.renderItems(this.items),r!==i.getInlineSize()?this.renderItems({useResize:!0}):window.setTimeout(function(){e._renderComplete({direction:e.defaultDirection,mounted:e.items,updated:[],isResize:!1})}),this},e.getComputedOutlineSize=function(t){return void 0===t&&(t=this.items),this.options.outlineSize||this.getContainerInlineSize()},e.getComputedOutlineLength=function(t){return void 0===t&&(t=this.items),this.options.outlineLength||1},e.destroy=function(t){var t=(t=void 0===t?{}:t).preserveUI,t=void 0===t?this.options.preserveUIOnDestroy:t;this.containerManager.destroy({preserveUI:t}),t||this.items.forEach(function(t){var e=t.element,t=t.orgCSSText;e&&(e.style.cssText=t)}),null!==(t=this._im)&&void 0!==t&&t.destroy()},e.checkReady=function(n){var t,i=this;void 0===n&&(n={});var r=this.items,o=r.filter(function(t){var e;return(null===(e=t.element)||void 0===e?void 0:e.parentNode)&&t.updateState!==m.UPDATED}),e=o.filter(function(t){return t.mountState!==p.MOUNTED}),s=[];e.filter(function(t){if(t.hasTransition)return!0;var e=t.element;return 0<parseFloat(getComputedStyle(e).transitionDuration)&&(t.hasTransition=!0,t.transitionDuration=e.style.transitionDuration,!0)}).forEach(function(t){t.element.style.transitionDuration="0s"}),null!==(t=this._im)&&void 0!==t&&t.destroy(),this._im=new W({prefix:this.options.attributePrefix}).on("preReadyElement",function(t){o[t.index].updateState=m.WAIT_LOADING}).on("preReady",function(){o.forEach(function(t){var e=t.orgRect.width&&t.orgRect.height,n=t.cssRect.width||t.cssRect.height;!e&&n&&(t.element.style.cssText=t.orgCSSText)}),i.itemRenderer.updateItems(o),i.readyItems(e,o,n)}).on("readyElement",function(t){var e=o[t.index];e.updateState=m.NEED_UPDATE,t.isPreReadyOver&&(e.element.style.cssText=e.orgCSSText,i.itemRenderer.updateItems([e]),i.readyItems([],[e],n))}).on("error",function(t){var e=r[t.index];i.trigger("contentError",{element:t.element,target:t.target,item:e,update:function(){s.push(e)}})}).on("ready",function(){s.length&&i.updateItems(s)}).check(o.map(function(t){return t.element}))},e.scheduleRender=function(){var t=this;this._clearRenderTimer(),this._renderTimer=window.setTimeout(function(){t.renderItems()})},e.fitOutlines=function(t){void 0===t&&(t=this.useFit);var e=this.outlines,n=e.start,i=e.end,r=n.length?Math.min.apply(Math,n):0;!t&&0<r||(e.start=n.map(function(t){return t-r}),e.end=i.map(function(t){return t-r}),this.items.forEach(function(t){var e=t.cssContentPos;"number"==typeof e&&(t.cssContentPos=e-r)}))},e.readyItems=function(t,e,n){var i=this.outlines,r=n.direction||this.options.defaultDirection,o=n.outline||i["end"===r?"start":"end"],s=this.items,i={start:g(o),end:g(o)};e.forEach(function(t){t.isUpdate=!0}),s.length&&(i=this.applyGrid(this.items,r,o)),e.forEach(function(t){t.isUpdate=!1}),this.setOutlines(i),this.fitOutlines(),this.itemRenderer.renderItems(this.items),this._refreshContainerContentSize();i=t.filter(function(t){return t.hasTransition});i.length&&(this.containerManager.resize(),i.forEach(function(t){t.element.style.transitionDuration=t.transitionDuration})),this._renderComplete({direction:r,mounted:t,updated:e,isResize:!!n.useResize})},e._renderComplete=function(t){this.trigger("renderComplete",t)},e._clearRenderTimer=function(){clearTimeout(this._renderTimer),this._renderTimer=0},e._refreshContainerContentSize=function(){var t=this.outlines,e=t.start,n=t.end,t=this.options.gap,n=n.length?Math.max.apply(Math,n):0,e=e.length?Math.max.apply(Math,e):0,t=Math.max(e,n-t);this.containerManager.setContentSize(t)},e._resizeContainer=function(){this.containerManager.resize(),this.itemRenderer.setContainerRect(this.containerManager.getRect())},e._init=function(){this._resizeContainer()},t.defaultOptions=R,t.propertyTypes=n,o([V],t)}(t);function at(t,e,n,i){return Math[i].apply(Math,t.slice(e,e+n))}j=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(R,t,e){for(var n,v=this.getComputedOutlineSize(R),y=this.getComputedOutlineLength(R),i=this.options,S=i.gap,r=i.align,z=i.columnSizeRatio,E=i.columnSize,i=e.length,P=R.length,C=this._getAlignPoses(y,v),_="end"===t,O=_?"min":"max",T=_?"max":"min",t=[0],w=(t=i===y?e.slice():(n=i?Math[T].apply(Math,e):0,B(y).map(function(){return n}))).slice(),I=1<y?C[1]-C[0]:0,D="stretch"===r,o=function(t){for(var e,n,i,r,o=R[_?t:P-1-t],s=parseInt(o.attributes.column||"1",10),a=parseInt(o.attributes.maxColumn||"1",10),u=o.inlineSize,h=o.contentSize,c=Math.min(y,s||Math.max(1,Math.ceil((u+S)/I))),l=Math.min(y,Math.max(c,a)),f=(n=c,i=O,t=(e=w).length-n+1,r="max"===i?"min":"max",a="max"===i?"lastIndexOf":"indexOf",(t=B(t).map(function(t){return at(e,t,n,r)}))[a](Math[i].apply(Math,t))),d=at(w,f,c,T);c<l;){var p=f+c,g=f-1;if(_&&(y<=p||w[p]>d))break;if(!_&&(g<0||w[g])<d)break;_||--f,++c}f=Math.max(0,f),c=Math.min(y-f,c),0<s&&(1<c||D||E)&&(o.cssInlineSize=u=(c-1)*I+v),0<z&&(o.cssContentSize=h=u/z);u=C[f],d=_?d:d-S-h;o.cssInlinePos=u,o.cssContentPos=d;var m=_?d+h+S:d;B(c).forEach(function(t){w[f+t]=m})},s=0;s<P;++s)o(s);return{start:_?t:w,end:_?w:t}},n.getComputedOutlineSize=function(t){void 0===t&&(t=this.items);var e=this.options,n=e.gap,i=e.align,r=this.columnSize||this.outlineSize,o=this.column||this.outlineLength||1,e=0;if("stretch"===i)e=(this.getContainerInlineSize()+n)/(o||1)-n;else if(r)e=r;else if(t.length){for(var s=t[0],a=0,u=t;a<u.length;a++){var h=u[a],c=h.attributes;if(h.updateState===m.UPDATED&&h.inlineSize&&!c.column&&!c.maxColumnCount){s=h;break}}e=s.inlineSize||0}else e=this.getContainerInlineSize();return e||0},n.getComputedOutlineLength=function(t){void 0===t&&(t=this.items);var e=this.gap,n=this.column||this.outlineLength,i=this.columnCalculationThreshold;return n||(n=this.getComputedOutlineSize(t),Math.min(t.length,Math.max(1,Math.floor((this.getContainerInlineSize()+e)/(n-i+e)))))},n._getAlignPoses=function(t,e){var n=this.options,i=n.align,r=n.gap,o=this.getContainerInlineSize(),s=B(t),a=0,u=0;return"justify"===i||"stretch"===i?(u=(n=t-1)?Math.max((o-e)/n,e+r):0,a=Math.min(0,o/2-(n*u+e)/2)):(e=(t-1)*(u=e+r)+e,"center"===i?a=(o-e)/2:"end"===i&&(a=o-e)),s.map(function(t){return a+t*u})},e.propertyTypes=d(d({},st.propertyTypes),{column:a.RENDER_PROPERTY,columnSize:a.RENDER_PROPERTY,columnSizeRatio:a.RENDER_PROPERTY,align:a.RENDER_PROPERTY,columnCalculationThreshold:a.RENDER_PROPERTY}),e.defaultOptions=d(d({},st.defaultOptions),{align:"justify",column:0,columnSize:0,columnSizeRatio:0,columnCalculationThreshold:.5}),o([V],e)}(st);function ut(t,e,n){return function(t,e){for(var n=[],i=e;i;)n.push(i),i=t[i];return n.reverse(),n}(function(t,e,n){var i={},r={};r[e]=0;var o,s,a,u,h,c,l=new ht(function(t){return t.cost});for(l.push({value:e,cost:0});l.size();)for(var f in s=(o=l.pop()).value,a=o.cost,u=t(s)||{})h=a+u[f],c=r[f],(void 0===r[f]||h<c)&&(r[f]=h,l.push({value:f,cost:h}),i[f]=s);if(void 0!==r[n])return i;throw n=["Could not find a path from ",e," to ",n,"."].join(""),new Error(n)}(t,e,n),n)}var ht=function(){function t(t){this.content=[],this.scoreFunction=t}var e=t.prototype;return e.push=function(t){this.content.push(t),this.bubbleUp(this.content.length-1)},e.pop=function(){var t=this.content[0],e=this.content.pop();return 0<this.content.length&&(this.content[0]=e,this.sinkDown(0)),t},e.size=function(){return this.content.length},e.bubbleUp=function(t){for(var e=t,n=this.content[e];0<e;){var i=Math.floor((e+1)/2)-1,r=this.content[i];if(!(this.scoreFunction(n)<this.scoreFunction(r)))break;this.content[i]=n,this.content[e]=r,e=i}},e.sinkDown=function(t){for(var e=this.content.length,n=this.content[t],i=this.scoreFunction(n);;){var r,o=2*(t+1),s=o-1,a=null;if(s<e&&(r=this.content[s],(r=this.scoreFunction(r))<i&&(a=s)),o<e&&(s=this.content[o],this.scoreFunction(s)<(null==a?i:r)&&(a=o)),null===a)break;this.content[t]=this.content[a],this.content[a]=n,t=a}},t}();function ct(t,e){var n=t.orgInlineSize,i=t.orgContentSize;if(!n||!i)return e;var r=parseFloat(t.gridData.inlineOffset)||0,t=parseFloat(t.gridData.contentOffset)||0;return(i<=t?1:(n-r)/(i-t))*(e-t)+r}P=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(t,e,n){var i=this.options,s=i.attributePrefix,a=i.horizontal;t.forEach(function(t){var e,n,i,r,o;t.isUpdate&&(e=t.element,r=t.attributes,n=t.gridData,i=parseFloat(r.inlineOffset)||n.inlineOffset||0,o=parseFloat(r.contentOffset)||0|n.contentOffset,!e||"inlineOffset"in r||"contentOffset"in r||t.mountState!==p.MOUNTED||(r=e.querySelector("["+s+"maintained-target]"))&&(t=e.offsetWidth-e.clientWidth+e.scrollWidth-r.clientWidth,r=e.offsetHeight-e.clientHeight+e.scrollHeight-r.clientHeight,o=a?(i=r,t):(i=t,r)),n.inlineOffset=i,n.contentOffset=o)});var r=this.options.rowRange,i=[];return t.length&&(i=r?this._getRowPath(t):this._getPath(t)),this._setStyle(t,i,n,"end"===e)},n._getRowPath=function(t){var e=this._getColumnRange(),n=this._getRowRange(),n=this._getRowLink(t,{path:[0],cost:0,length:0,currentNode:0},e,n);return null!==(n=null==n?void 0:n.path.map(function(t){return""+t}))&&void 0!==n?n:[]},n._getRowLink=function(t,e,n,i){var r=n[0],o=i[0],s=i[1],a=t.length,u=e.path,h=e.length,c=e.cost,l=e.currentNode;if(l<a&&(s<=h||a<l+r)){r=X(a-l,n)*Math.abs(this._getCost(t,l,a));return d(d({},e),{length:h+1,path:g(u,[a]),currentNode:a,cost:c+r,isOver:!0})}return a<=l?d(d({},e),{currentNode:a,isOver:h<o||s<h}):this._searchRowLink(t,e,a,n,i)},n._searchRowLink=function(t,e,n,i,r){for(var o,s=i[0],a=i[1],u=e.currentNode,h=e.path,c=e.length,l=e.cost,f=Math.min(n,u+a),d=[],p=u+s;p<=f;++p)p!==u&&(o=Math.abs(this._getCost(t,u,p)),(o=this._getRowLink(t,{path:g(h,[p]),length:c+1,cost:l+o,currentNode:p},i,r))&&d.push(o));return d.sort(function(t,e){var n=t.isOver;return n!==e.isOver?n?1:-1:X(t.length,r)-X(e.length,r)||t.cost-e.cost}),d[0]},n._getExpectedRowSize=function(t){var e=this.options.gap,r=this.getContainerInlineSize()-e*(t.length-1),o=0,s=0;return t.forEach(function(t){var e,n=t.orgInlineSize,i=t.orgContentSize;n&&i?(e=parseFloat(t.gridData.inlineOffset)||0,t=parseFloat(t.gridData.contentOffset)||0,o+=i=i<=t?1:(n-e)/(i-t),s+=t*i,r-=e):o+=1}),o?(r+s)/o:0},n._getExpectedInlineSize=function(t,n){var e=this.options.gap,i=t.reduce(function(t,e){return t+ct(e,n)},0);return i?i+e*(t.length-1):0},n._getCost=function(t,e,n){var i=t.slice(e,n),t=this._getExpectedRowSize(i),e=this._getSizeRange(),n=e[0],e=e[1];if(this.isCroppedSize){if(n<=t&&t<=e)return 0;i=this._getExpectedInlineSize(i,t<n?n:e);return Math.pow(i-this.getContainerInlineSize(),2)}if(isFinite(e)){if(t<n)return Math.pow(t-n,2)+Math.pow(e,2);if(e<t)return Math.pow(t-e,2)+Math.pow(e,2)}else if(t<n)return Math.max(Math.pow(n,2),Math.pow(t,2))+Math.pow(e,2);return t-n},n._getPath=function(o){var s=this,a=o.length,t=this.options.columnRange,t=q(t)?t:[t,t],u=t[0],h=t[1];return ut(function(t){for(var e={},n=parseInt(t,10),i=Math.min(n+u,a);i<=a&&!(h<i-n);++i){var r=s._getCost(o,n,i);r<0&&i===a&&(r=0),e[""+i]=Math.pow(r,2)}return e},"0",""+a)},n._setStyle=function(t,e,n,i){var s=this;void 0===n&&(n=[]);var r=this.options,a=r.gap,u=r.isCroppedSize,h=r.displayedRow,c=this._getSizeRange(),n=n[0]||0,l=this.getContainerInlineSize(),e=function(t,e){for(var n=e.length,i=[],r=0;r<n-1;++r){var o=parseInt(e[r],10),s=parseInt(e[r+1],10);i.push(t.slice(o,s))}return i}(t,e),f=n,d=0;if(e.forEach(function(i,t){var e=i.length,r=s._getExpectedRowSize(i);u&&(r=Math.max(c[0],Math.min(r,c[1])));var n=s._getExpectedInlineSize(i,r),e=a*(e-1),o=(l-e)/(n-e);i.forEach(function(t,e){var n=ct(t,r),e=i[e-1],e=e?e.cssInlinePos+e.cssInlineSize+a:0;u&&(n*=o),t.setCSSGridRect({inlinePos:e,contentPos:f,inlineSize:n,contentSize:r})}),f+=a+r,(h<0||t<h)&&(d=f)}),i)return{start:[n],end:[d]};var o=f-n;return t.forEach(function(t){t.cssContentPos-=o}),{start:[n-o],end:[n]}},n.getComputedOutlineLength=function(){return 1},n.getComputedOutlineSize=function(){return this.getContainerInlineSize()},n._getRowRange=function(){var t=this.rowRange;return q(t)?t:[t,t]},n._getColumnRange=function(){var t=this.columnRange;return q(t)?t:[t,t]},n._getSizeRange=function(){var t=this.sizeRange;return q(t)?t:[t,t]},e.propertyTypes=d(d({},st.propertyTypes),{columnRange:a.RENDER_PROPERTY,rowRange:a.RENDER_PROPERTY,sizeRange:a.RENDER_PROPERTY,isCroppedSize:a.RENDER_PROPERTY,displayedRow:a.RENDER_PROPERTY}),e.defaultOptions=d(d({},st.defaultOptions),{columnRange:[1,8],rowRange:0,sizeRange:[0,1/0],displayedRow:-1,isCroppedSize:!1}),o([V],e)}(st);function lt(t){var e=-1/0;return t.forEach(function(t){isFinite(t)&&(e=Math.max(e,t))}),isFinite(e)?e:0}function ft(t,e,n){return lt(t)+function(t,e,n){var i=t.length;if(!i)return 0;var r=function(t){var e=1/0;return t.forEach(function(t){isFinite(t)&&(e=Math.min(e,t))}),isFinite(e)?e:0}(e),o=lt(t),s=0;if(!n)return 0;for(var a=0;a<i;++a){var u=t[a],h=e[a];isFinite(u)&&isFinite(h)&&(u=u-o,h=h-r,s=a?Math.max(s,s+u-h):u-h)}return s}(t,e,n)}function dt(t,e,n){for(var i=n.inlinePos,r=n.inlineSize,o=n.contentPos,s=n.contentSize,a=i;a<i+r;++a)t[a]=Math.min(t[a],o),e[a]=Math.max(e[a],o+s)}var t=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(t,e,n){var i=this._getFrame(),r=i.inlineSize,o=i.contentSize,s=i.rects,a=this.options,u=a.gap,h=a.useFrameFill,a=this.getRectSize(r),c=a.inlineSize,l=a.contentSize,f=t.length;if(!f||!r||!o)return{start:n,end:n};for(var d=s.length,p=B(r).map(function(){return 1/0}),g=B(r).map(function(){return-1/0}),m=i.outline.map(function(t){return t*(l+u)}),R=0;R<f;R+=d)for(var v=ft(g,m,h),y=0;y<d&&R+y<f;++y){var S=t[R+y],z=s[y],E=z.contentPos,P=z.inlinePos,C=z.contentSize,_=z.inlineSize,O=v+E*(l+u),z=P*(c+u),E=C*(l+u)-u,C=_*(c+u)-u;dt(p,g,{inlinePos:P,inlineSize:_,contentPos:O,contentSize:E+u}),S.setCSSGridRect({inlinePos:z,contentPos:O,inlineSize:C,contentSize:E})}var T,e="end"===e,n=n.length?n:[0];n.length!==r&&(T=(e?Math.max:Math.min).apply(Math,n),n=B(r).map(function(){return T}));var p=p.map(function(t){return isFinite(t)?t:0}),g=g.map(function(t){return isFinite(t)?t:0}),w=e?ft(n,p,h):ft(g,n,h);return t.forEach(function(t){t.cssContentPos+=w}),{start:p.map(function(t){return t+w}),end:g.map(function(t){return t+w})}},n.getComputedOutlineLength=function(){var t=this.options.frame;return t.length?t[0].length:0},n.getComputedOutlineSize=function(){var t=this.options,e=t.gap,t=t.rectSize;return"object"==typeof t?t.inlineSize:t||(this.getContainerInlineSize()+e)/this.getComputedOutlineLength()-e},n.getRectSize=function(t){var e=this.options,n=e.gap,e=e.rectSize;if("object"==typeof e)return e;n=e||(this.getContainerInlineSize()+n)/t-n;return{inlineSize:n,contentSize:n}},n._getFrame=function(){for(var t=this.options.frame,e=t.length,n=e?t[0].length:0,i=[],r={},o=B(n).map(function(){return 1/0}),s=B(n).map(function(){return-1/0}),a=0;a<e;++a)for(var u=0;u<n;++u){var h=t[a][u];h&&(r[a+","+u]||(dt(o,s,h=this._findRect(r,h,a,u,n,e)),i.push(h)))}return i.sort(function(t,e){return t.type<e.type?-1:1}),{rects:i,inlineSize:n,contentSize:e,outline:o}},n._findRect=function(t,e,n,i,r,o){for(var s=this.options.frame,a=1,u=1,h=i;h<r&&s[n][h]===e;++h)u=h-i+1;for(var c=n;c<o&&s[c][i]===e;++c)a=c-n+1;for(var l=n;l<n+a;++l)for(var f=i;f<i+u;++f)t[l+","+f]=!0;return{type:e,inlinePos:i,contentPos:n,inlineSize:u,contentSize:a}},e.propertyTypes=d(d({},st.propertyTypes),{frame:a.RENDER_PROPERTY,useFrameFill:a.RENDER_PROPERTY,rectSize:a.RENDER_PROPERTY}),e.defaultOptions=d(d({},st.defaultOptions),{frame:[],rectSize:0,useFrameFill:!0}),o([V],e)}(st),pt=function(){function t(t){var e,n=d({orgInlineSize:0,orgContentSize:0,inlineSize:0,contentSize:0,inlinePos:0,contentPos:0,items:[]},t);for(e in n)this[e]=n[e]}var e=t.prototype;return e.scaleTo=function(t,e){var n=this.inlineSize?t/this.inlineSize:0,i=this.contentSize?e/this.contentSize:0;this.items.forEach(function(t){0!=n&&(t.inlinePos*=n,t.inlineSize*=n),0!=i&&(t.contentPos*=i,t.contentSize*=i)}),this.inlineSize=t,this.contentSize=e},e.push=function(t){this.items.push(t)},e.getOrgSizeWeight=function(){return this.orgInlineSize*this.orgContentSize},e.getSize=function(){return this.inlineSize*this.contentSize},e.getOrgRatio=function(){return 0===this.orgContentSize?0:this.orgInlineSize/this.orgContentSize},e.getRatio=function(){return 0===this.contentSize?0:this.inlineSize/this.contentSize},t}();function gt(t,e){e=t/e;return(e=e<1?1/e:e)-1}var mt,Rt={__proto__:null,default:st,GetterSetter:V,withGridMethods:E,withMethods:K,MasonryGrid:j,JustifiedGrid:P,FrameGrid:t,PackingGrid:function(t){function e(){return null!==t&&t.apply(this,arguments)||this}r(e,t);var n=e.prototype;return n.applyGrid=function(t,e,n){var i=this,r=this.options,o=r.aspectRatio,s=r.gap,a=this.getContainerInlineSize(),u=a/o,n=n.length?n:[0],h="end"===e?Math.max.apply(Math,n):Math.min.apply(Math,n)-u-s,n=h+u+s,c=new pt({});return t.forEach(function(t){t=new pt({inlineSize:t.orgInlineSize,contentSize:t.orgContentSize,orgInlineSize:t.orgInlineSize,orgContentSize:t.orgContentSize});i._findBestFitArea(c,t),c.push(t),c.scaleTo(a+s,u+s)}),t.forEach(function(t,e){var n=c.items[e],i=n.inlineSize-s,r=n.contentSize-s,e=h+n.contentPos,n=n.inlinePos;t.setCSSGridRect({inlinePos:n,contentPos:e,inlineSize:i,contentSize:r})}),{start:[h],end:[n]}},n._findBestFitArea=function(t,p){if(0===t.getRatio())return t.orgInlineSize=p.inlineSize,t.orgContentSize=p.contentSize,t.inlineSize=p.inlineSize,void(t.contentSize=p.contentSize);var g,e,n,i,r,m=1/0,R=!1,v={inlineSize:0,contentSize:0},y={inlineSize:0,contentSize:0},S=this._getWeight("size"),z=this._getWeight("ratio");t.items.forEach(function(t){for(var e=gt(t.getOrgSizeWeight(),t.getSize())*S,n=gt(t.getOrgRatio(),t.getRatio())*z,i=t.inlineSize,r=t.contentSize,o=0;o<2;++o){var s=void 0,a=void 0,u=void 0,h=void 0;0===o?(u=s=i,h=r-(a=r*(p.contentSize/(t.orgContentSize+p.contentSize)))):(h=a=r,u=i-(s=i*(p.inlineSize/(t.orgInlineSize+p.inlineSize))));var c=s*a,l=s/a,f=u*h,d=h/h,c=gt(p.getSize(),c)*S;c+=gt(p.getRatio(),l)*z,c+=gt(t.getOrgSizeWeight(),f)*S-e,(c+=gt(t.getOrgRatio(),d)*z-n)===Math.min(c,m)&&(m=c,g=t,R=0===o,v.inlineSize=s,v.contentSize=a,y.inlineSize=u,y.contentSize=h)}}),e=g,n=v,i=y,r=R,(t=p).contentSize=n.contentSize,t.inlineSize=n.inlineSize,e.contentSize=i.contentSize,e.inlineSize=i.inlineSize,r?(t.contentPos=e.contentPos+e.contentSize,t.inlinePos=e.inlinePos):(t.inlinePos=e.inlinePos+e.inlineSize,t.contentPos=e.contentPos)},n.getComputedOutlineLength=function(){return 1},n.getComputedOutlineSize=function(){return this.getContainerInlineSize()},n._getWeight=function(t){var e=this.options,n=e.weightPriority;return n===t?100:"custom"===n?e[t+"Weight"]:1},e.propertyTypes=d(d({},st.propertyTypes),{aspectRatio:a.RENDER_PROPERTY,sizeWeight:a.RENDER_PROPERTY,ratioWeight:a.RENDER_PROPERTY,weightPriority:a.RENDER_PROPERTY}),e.defaultOptions=d(d({},st.defaultOptions),{aspectRatio:1,sizeWeight:1,ratioWeight:1,weightPriority:"custom"}),o([V],e)}(st),ItemRenderer:J,GridItem:ot,ContainerManager:v,DEFAULT_GRID_OPTIONS:R,get PROPERTY_TYPE(){return a},get MOUNT_STATE(){return p},get UPDATE_STATE(){return m},GRID_PROPERTY_TYPES:n,GRID_METHODS:e,GRID_EVENTS:["renderComplete","contentError"],RECT_NAMES:f};for(mt in Rt)st[mt]=Rt[mt];return st});
 //# sourceMappingURL=grid.min.js.map

package.json

 {
 	"name": "@egjs/grid",
-	"version": "1.7.0-beta.7",
+	"version": "1.7.0-beta.8",
 	"description": "A component that can arrange items according to the type of grids",
@@ -154,4 +154,4 @@ "main": "dist/grid.cjs.js",
 		"@egjs/component": "^3.0.0",
-		"@egjs/imready": "^1.3.0-beta.0"
+		"@egjs/imready": "^1.3.0"
 	}
 }

README.md

@@ -64,3 +64,29 @@ <p align="middle" ><img src="https://naver.github.io/egjs-grid/images/logo.png" /></p>
 
+## Use Faster & Lazy Rendering
 
+* When the `loading="lazy"` or `data-grid-lazy="true"`(external lazy loading) attribute is used, Rendering of the items occurs immediately. When items are loaded, they are rendered sequentially.
+```html
+<img src="..." />
+<img src="..." />
+<img src="..." loading="lazy" />
+<img data-grid-lazy="true" />
+```
+* If you use `data-grid-width` and `data-grid-height` attributes, the size of self, child image, and video elements is automatically adjusted until loading is complete.
+```html
+<div data-grid-width="100" data-grid-height="100">
+   <img src="..." />
+   <img src="..." />
+   <img src="..." />
+</div>
+```
+
+* If you use `data-grid-skip="true"` attribute, you can omit it even if there are images in itself and child image, and video elements.
+```html
+<div data-grid-skip="true">
+   <img src="..." />
+   <img src="..." />
+   <img src="..." />
+</div>
+```
+
 ## Packages
@@ -67,0 +93,0 @@ |Package|Version|Description|

src/consts.ts

@@ -21,3 +21,2 @@ /**
   defaultDirection: "end",
-  hideBeforeLoading: false,
   externalContainerManager: null,
@@ -29,7 +28,5 @@ externalItemRenderer: null,
   outlineSize: 0,
+  useRoundedSize: true,
 };
 
-export const INVISIBLE_POS = -9999;
-export const MINIMUM_NUMBER = 0.000001;
-
 export enum PROPERTY_TYPE {
@@ -36,0 +33,0 @@ PROPERTY = 1,

src/Grid.ts

@@ -7,3 +7,3 @@ /**
 import Component from "@egjs/component";
-import { DEFAULT_GRID_OPTIONS, GRID_PROPERTY_TYPES, INVISIBLE_POS, MOUNT_STATE, UPDATE_STATE } from "./consts";
+import { DEFAULT_GRID_OPTIONS, GRID_PROPERTY_TYPES, MOUNT_STATE, UPDATE_STATE } from "./consts";
 import { ContainerManager } from "./ContainerManager";
@@ -78,2 +78,3 @@ import {
       autoResize,
+      useRoundedSize,
     } = this.options;
@@ -95,2 +96,3 @@
         percentage,
+        useRoundedSize,
       });
@@ -160,3 +162,3 @@
     const items = this.items;
-    const { hideBeforeLoading, horizontal } = this.options;
+    const { horizontal } = this.options;
     const elements: HTMLElement[] = this.getChildren();
@@ -173,11 +175,5 @@ const { added, maintained, changed, removed } = diff(this.items.map((item) => item.element!), elements);
         element: elements[index],
-        cssRect: hideBeforeLoading ? { top: INVISIBLE_POS, left: INVISIBLE_POS } : {},
       });
     });
 
-    if (hideBeforeLoading && added.length) {
-      this.itemRenderer.renderItems(added.map((index) => nextItems[index]));
-      this._refreshContainerContentSize();
-    }
-
     this.setItems(nextItems);
@@ -231,3 +227,3 @@
       this.syncElements(options);
-    } else if (options.useResize) {
+    } else if (options.useResize || options.useOrgResize) {
       // Resize container and Update all items
@@ -364,7 +360,8 @@ this._resizeContainer();
     }).on("preReady", () => {
+      // reset org size
       updated.forEach((item) => {
-        const orgSize = item.orgRect.width;
-        const cssSize = item.cssRect.width;
+        const hasOrgSize = item.orgRect.width && item.orgRect.height;
+        const hasCSSSize = item.cssRect.width || item.cssRect.height;
 
-        if (!orgSize && orgSize !== cssSize) {
+        if (!hasOrgSize && hasCSSSize) {
           item.element!.style.cssText = item.orgCSSText;
@@ -371,0 +368,0 @@ }

src/grids/JustifiedGrid.ts

@@ -7,3 +7,3 @@ /**
 import Grid from "../Grid";
-import { MINIMUM_NUMBER, MOUNT_STATE, PROPERTY_TYPE } from "../consts";
+import { MOUNT_STATE, PROPERTY_TYPE } from "../consts";
 import { GridOptions, Properties, GridOutlines } from "../types";
@@ -40,7 +40,7 @@ import { getRangeCost, GetterSetter, isObject } from "../utils";
   if (!inlineSize || !contentSize) {
-    return 0;
+    return rowSize;
   }
   const inlineOffset = parseFloat(item.gridData.inlineOffset) || 0;
   const contentOffset = parseFloat(item.gridData.contentOffset) || 0;
-  const ratio = (inlineSize - inlineOffset) / Math.max(MINIMUM_NUMBER, contentSize - contentOffset);
+  const ratio = contentSize <= contentOffset ? 1 : (inlineSize - inlineOffset) / (contentSize - contentOffset);
 
@@ -262,2 +262,3 @@ return ratio * (rowSize - contentOffset) + inlineOffset;
       if (!inlineSize || !contentSize) {
+        ratioSum += 1;
         return;
@@ -268,3 +269,4 @@ }
       const contentOffset = parseFloat(item.gridData.contentOffset) || 0;
-      const maintainedRatio = (inlineSize - inlineOffset) / Math.max(MINIMUM_NUMBER, contentSize - contentOffset);
+      const maintainedRatio = contentSize <= contentOffset ? 1
+        : (inlineSize - inlineOffset) / (contentSize - contentOffset);
 
@@ -286,3 +288,3 @@ ratioSum += maintainedRatio;
 
-    return size ? size +  gap * (items.length - 1) : 0;
+    return size ? size + gap * (items.length - 1) : 0;
   }
@@ -383,3 +385,3 @@ private _getCost(
 
-      groupItems.forEach((item, i)=> {
+      groupItems.forEach((item, i) => {
         let columnSize = getExpectedColumnSize(item, rowSize);
@@ -386,0 +388,0 @@

src/grids/MasonryGrid.ts

@@ -41,2 +41,3 @@ /**
  * @property - Align of the position of the items. If you want to use `stretch`, be sure to set `column` or `columnSize` option. ("start", "center", "end", "justify", "stretch") (default: "justify") <ko>아이템들의 위치의 정렬. `stretch`를 사용하고 싶다면 `column` 또는 `columnSize` 옵션을 설정해라.  ("start", "center", "end", "justify", "stretch") (default: "justify")</ko>
+ * @property - Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate. (default: 1) <ko>칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다. (default: 1)</ko>
  */
@@ -48,2 +49,3 @@ export interface MasonryGridOptions extends GridOptions {
   align?: GridAlign;
+  columnCalculationThreshold?: number;
 }
@@ -53,3 +55,2 @@
  * MasonryGrid is a grid that stacks items with the same width as a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new item.
- *
  * @ko MasonryGrid는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 아이템를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 아이템 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다.
@@ -68,2 +69,3 @@ * @memberof Grid
     align: PROPERTY_TYPE.RENDER_PROPERTY,
+    columnCalculationThreshold: PROPERTY_TYPE.RENDER_PROPERTY,
   };
@@ -76,2 +78,3 @@ public static defaultOptions: Required<MasonryGridOptions> = {
     columnSizeRatio: 0,
+    columnCalculationThreshold: 0.5,
   };
@@ -206,2 +209,3 @@
     const columnOption = this.column || this.outlineLength;
+    const columnCalculationThreshold = this.columnCalculationThreshold;
     let column = 1;
@@ -216,3 +220,4 @@
         items.length,
-        Math.max(1, Math.floor((this.getContainerInlineSize() + gap) / (columnSize + gap))),
+        Math.max(1, Math.floor((this.getContainerInlineSize() + gap)
+          / (columnSize - columnCalculationThreshold + gap))),
       );
@@ -219,0 +224,0 @@ }

src/ItemRenderer.ts

@@ -18,2 +18,3 @@ /**
   isConstantSize?: boolean;
+  useRoundedSize?: boolean;
 }
@@ -39,2 +40,3 @@ export interface ItemRendererStatus {
       isConstantSize: DEFAULT_GRID_OPTIONS.isConstantSize,
+      useRoundedSize: DEFAULT_GRID_OPTIONS.useRoundedSize,
       ...options,
@@ -93,3 +95,3 @@ };
   private _updateItem(item: GridItem) {
-    const { isEqualSize, isConstantSize } = this.options;
+    const { isEqualSize, isConstantSize, useRoundedSize } = this.options;
     const initialRect = this.initialRect;
@@ -111,7 +113,16 @@ const { orgRect, element } = item;
         top: element.offsetTop,
-        width: element.offsetWidth,
-        height: element.offsetHeight,
+        width: 0,
+        height: 0,
       };
+      if (useRoundedSize) {
+        rect.width = element.offsetWidth;
+        rect.height = element.offsetHeight;
+      } else {
+        const clientRect = element.getBoundingClientRect();
+
+        rect.width = clientRect.width;
+        rect.height = clientRect.height;
+      }
     }
-    if (!item.isFirstUpdate) {
+    if (!item.isFirstUpdate || !hasOrgSize) {
       item.orgRect = { ...rect };
@@ -118,0 +129,0 @@ }

src/types.ts

@@ -35,2 +35,4 @@ /**
  * @property - You can set the ContainerManager를 directly externally. <ko>외부에서 직접 ContainerManager를 설정할 수 있다.</ko>
+ * @property - Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect. (default: true)
+ <ko>사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다. (default: true)</ko>
  */
@@ -49,3 +51,2 @@ export interface GridOptions {
   useTransform?: boolean;
-  hideBeforeLoading?: boolean;
   renderOnPropertyChange?: boolean;
@@ -56,2 +57,3 @@ preserveUIOnDestroy?: boolean;
   outlineSize?: number;
+  useRoundedSize?: boolean;
   externalItemRenderer?: ItemRenderer | null;
@@ -58,0 +60,0 @@ externalContainerManager?: ContainerManager | null;

No alert changes

Improved metrics

Total package byte prevSize

1303625

increased by0.57%

Lines of code

14167

increased by0.2%

Number of lines in readme file

200

increased by14.94%

Dependency changes

• Updated@egjs/imready@^1.3.0