avris-columnist/dist/Columnist.min.js

Simple and lightweight multi-column design

var _createClass=(()=>{function r(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(t,n,e){return n&&r(t.prototype,n),e&&r(t,e),t}})();function _toConsumableArray(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n<t.length;n++)e[n]=t[n];return e}return Array.from(t)}function _classCallCheck(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var Columnist=(()=>{function n(t){_classCallCheck(this,n),this.$container=t,this.timer=null,this.columnCount=null}return _createClass(n,[{key:"layout",value:function(){var i=this,a=this._countColumns(),n=(a!==this.columnCount&&[].concat(_toConsumableArray(this.$container.children)).forEach(function(t){t.style.marginTop=null}),this.columnCount=a,0);return window.requestAnimationFrame(function t(){var e=!1,r={},o=0;[].concat(_toConsumableArray(i.$container.children)).forEach(function(t){var n=i._getStyle(t);n&&(n=parseInt(n.marginBottom.slice(0,-2),10)+parseInt(n.paddingBottom.slice(0,-2),10)+parseInt(n.borderBottomWidth.slice(0,-2),10),r[o]=Math.max(0,t.offsetHeight-t.children[0].offsetHeight-n),void 0!==r[o-a]&&(n=("-"+r[o-a]+"px").replace("-0px","0px"),t.style.marginTop!==n)&&(t.style.marginTop=n,e=!0),o++)}),n++,e&&n<100&&window.requestAnimationFrame(t)}),this}},{key:"_countColumns",value:function(){var t=this._getColumnWidth();return t?Math.floor(this.$container.offsetWidth/t):1}},{key:"_getColumnWidth",value:function(){for(var t=[].concat(_toConsumableArray(this.$container.children)),n=0;n<t.length;n++){var e=t[n];if(this._getStyle(e))return e.offsetWidth-1}return null}},{key:"_getStyle",value:function(t){t=t.currentStyle||window.getComputedStyle(t);return"none"===t.display?null:t}},{key:"start",value:function(){var t=this;return this.timer=setInterval(function(){return t.layout()},0<arguments.length&&void 0!==arguments[0]?arguments[0]:300),this}},{key:"destroy",value:function(){var e=this;return this.timer&&(clearInterval(this.timer),this.timer=null),[].concat(_toConsumableArray(this.$container.children)).forEach(function(t,n){e._getStyle(t)&&(t.style.marginTop=null)}),this}}]),n})();