waterfall.min.js

!function(){function t(){this.__events={}}function e(e){t.call(this),this.opts=n.extend({},this.constructor.defaultopts,e),this._container="string"==typeof this.opts.container?document.querySelector(this.opts.container):this.opts.container,this._pins="string"==typeof this.opts.pins?document.querySelectorAll(this.opts.pins):this.opts.pins,this._loader="string"==typeof this.opts.loader?document.querySelector(this.opts.loader):this.opts.loader,this.init()}var i="object"==typeof self&&self.self==self&&self||"object"==typeof global&&global.global==global&&global||this||{};Function.prototype.bind=Function.prototype.bind||function(t){if("function"!=typeof this)throw new Error("Function.prototype.bind - what is trying to be bound is not callable");var e=this,i=Array.prototype.slice.call(arguments,1),n=function(){},o=function(){var o=Array.prototype.slice.call(arguments);e.apply(this instanceof n?this:t,i.concat(o))};return n.prototype=this.prototype,o.prototype=new n,o};var n={extend:function(t){for(var e=1,i=arguments.length;e<i;e++)for(var n in arguments[e])arguments[e].hasOwnProperty(n)&&(t[n]=arguments[e][n]);return t},isValidListener:function(t){return"function"==typeof t||!(!t||"object"!=typeof t)&&isValidListener(t.listener)},indexOf:function(t,e){if(t.indexOf)return t.indexOf(e);for(var i=-1,n=0,o=t.length;n<o;n++)if(t[n]===e){i=n;break}return i}};t.prototype.on=function(t,e){if(t&&e){if(!n.isValidListener(e))throw new TypeError("listener must be a function");var i=this.__events,o=i[t]=i[t]||[],s="object"==typeof e;return-1===n.indexOf(o,e)&&o.push(s?e:{listener:e,once:!1}),this}},t.prototype.once=function(t,e){return this.on(t,{listener:e,once:!0})},t.prototype.off=function(t,e){var i=this.__events[t];if(i){for(var n,o=0,s=i.length;o<s;o++)if(i[o]&&i[o].listener===e){n=o;break}return void 0!==n&&i.splice(n,1,null),this}},t.prototype.emit=function(t,e){var i=this.__events[t];if(i){for(var n=0;n<i.length;n++){var o=i[n];o&&(o.listener.apply(this,e||[]),o.once&&this.off(t,o.listener))}return this}};var o=window.addEventListener?function(t,e,i){t.addEventListener(e,i,!1)}:window.attachEvent?function(t,e,i){t.attachEvent("on"+e,i)}:void 0;e.VERSION="1.0.0",e.defaultopts={gapHeight:20,gapWidth:20,pinWidth:216,threshold:100};var s=e.prototype=new t;s.constructor=e,s.init=function(){this.getColumnNum(),this.setContainer(),this._pins.length>0&&this.setPosition(this._pins);var t=this;setTimeout(function(){t.setWaterFall()},0),this.bindScrollEvent()},s.getColumnNum=function(){this._unitWidth=this.opts.pinWidth+this.opts.gapWidth,this._viewPortWidth=window.innerWidth||document.documentElement.clientWidth,this._viewPortHeight=window.innerHeight||document.documentElement.clientHeight,this._num=Math.floor((this._viewPortWidth+this.opts.gapWidth)/this._unitWidth),this._columnHeightArr=[];for(var t=0;t<this._num;t++)this._columnHeightArr[t]=0},s.setContainer=function(){this._container.style.width=this._unitWidth*this._num-this.opts.gapWidth+"px"},s.getMin=function(){return Math.min.apply(null,this._columnHeightArr)},s.getMax=function(){return Math.max.apply(null,this._columnHeightArr)};var r=!1;s.appendPins=function(){r||(r=!0,this._loader&&(this._loader.style.display="block",this._loader.style.top=this.getMax()+50+"px",this._loader.style.left="50%"),this.emit("load"))},s.append=function(t,e){this._checkResult=[],this._newPins=[];var i=document.createElement("div");i.innerHTML=t,children=i.querySelectorAll(this.opts.pins);for(var n=document.createDocumentFragment(),o=0,s=children.length;o<s;o++)n.appendChild(children[o]),this._checkResult[o]=!1,this._newPins.push(children[o]),this._checkImgHeight(children[o],e,o);this.isReadyAppend(n)},s._checkImgHeight=function(t,e,i){(new Date).getTime();var n=t.querySelector(e),o=this;if(n.onload=function(){n.getAttribute("height")||(n.setAttribute("height",Math.floor(n.height/n.width*o.opts.pinWidth)),o._checkResult[i]=!0,clearInterval(s))},n.onerror=function(){n.getAttribute("height")||(n.setAttribute("height",250),o._checkResult[i]=!0,clearInterval(s))},n.getAttribute("height"))return n;var s=setInterval(function(){n.width>0&&n.height>0&&(n.setAttribute("height",Math.floor(n.height/n.width*o.opts.pinWidth)),o._checkResult[i]=!0,clearInterval(s))},40)},s.isReadyAppend=function(t){var e=this,i=function(){-1==n.indexOf(e._checkResult,!1)?(e._container.appendChild(t),r=!1,e._loader&&(e._loader.style.display="none"),e.setPosition(e._newPins),clearTimeout(o)):setTimeout(i)},o=setTimeout(i,40)},s.setPosition=function(t){for(var e=0,i=t.length;e<i;e++){var o=this.getMin(),s=n.indexOf(this._columnHeightArr,o);t[e].style.left=this._unitWidth*s+"px",t[e].style.top=o+"px",this._columnHeightArr[s]+=t[e].offsetHeight+this.opts.gapHeight}this._newPins=[],this.setWaterFall()},s.setWaterFall=function(){this.getMin()<this._viewPortHeight&&this.appendPins()},s.bindScrollEvent=function(){o(window,"scroll",this.handleScroll.bind(this)),o(window,"resize",this.handleResize.bind(this))};var h=null;s.handleResize=function(){var t=this;clearTimeout(h),h=setTimeout(function(){t.resetPosition()},100)},s.resetPosition=function(){this.getColumnNum(),this.setContainer(),this.setPosition("string"==typeof this.opts.pins?document.querySelectorAll(this.opts.pins):this.opts.pins)},s.checkScroll=function(){return this.getMin()-(window.pageYOffset||document.documentElement.scrollTop)<this._viewPortHeight+this.opts.threshold},s.handleScroll=function(){var t=this;console.log(t.checkScroll()),t.checkScroll()&&t.appendPins()},"undefined"==typeof exports||exports.nodeType?i.WaterFall=e:("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=e),exports.WaterFall=e)}();