paulwalko.github.io/assets/js/responsive_waterfall.js

1 line
2.0 KiB
JavaScript

!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.Waterfall=e()}(this,function(){"use strict";var t=function(t){var e;Object.defineProperty(this,"minBoxWidth",{get:function(){return e},set:function(t){100>t&&(t=100),t>1e3&&(t=1e3),e=t}}),t=t||{};var n=t.containerSelector||".wf-container",i=t.boxSelector||".wf-box";this.minBoxWidth=t.minBoxWidth||250,this.columns=[],this.container=document.querySelector(n),this.boxes=this.container?Array.prototype.slice.call(this.container.querySelectorAll(i)):[],this.compose();for(var o,s=this.container.querySelectorAll("img"),r=this,c=0;c<s.length;c++){var h=s[c];h.onload=function(){o&&clearTimeout(o),o=setTimeout(function(){r.compose(!0)},500)}}window.addEventListener("resize",function(){r.compose()})};return t.prototype.computeNumberOfColumns=function(){var t=Math.floor(this.container.clientWidth/this.minBoxWidth);return t=t||1},t.prototype.initColumns=function(t){if(t>0){this.columns=[];for(var e=100/t+"%";t--;){var n=document.createElement("div");n.className="wf-column",n.style.width=e,this.columns.push(n),this.container.appendChild(n)}}},t.prototype.getMinHeightIndex=function(){if(this.columns&&this.columns.length>0){for(var t=this.columns[0].clientHeight,e=0,n=1;n<this.columns.length;n++){var i=this.columns[n];i.clientHeight<t&&(t=i.clientHeight,e=n)}return e}return-1},t.prototype.getHighestIndex=function(){if(this.columns&&this.columns.length>0){for(var t=this.columns[0].clientHeight,e=0,n=1;n<this.columns.length;n++){var i=this.columns[n];i.clientHeight>t&&(t=i.clientHeight,e=n)}return e}return-1},t.prototype.compose=function(t){var e=this.computeNumberOfColumns(),n=this.columns.length;if(t||e!=n){for(var i=0;i<this.columns.length;i++){var o=this.columns[i];o.remove()}this.initColumns(e);for(var i=0,s=this.boxes.length;s>i;i++){var r=this.boxes[i];this.addBox(r)}}},t.prototype.addBox=function(t){this.boxes.indexOf(t)<0&&this.boxes.push(t);var e=this.getMinHeightIndex();if(e>-1){var n=this.columns[e];n.appendChild(t)}},t});