Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

11 lines
15 KiB

/**
* Isotope v1.2.110523
* An exquisite jQuery plugin for magical layouts
* http://isotope.metafizzy.co
*
* Commercial use requires one-time license fee
* http://metafizzy.co/#licenses
*
* Copyright 2011 David DeSandro / Metafizzy
*/
(function(a,b,c){var d=function(){function b(b,c){c=c||document.documentElement;var d=c.style,e;if(typeof d[b]=="string")return b;b=b.charAt(0).toUpperCase()+b.slice(1);for(var f=0,g=a.length;f<g;f++){e=a[f]+b;if(typeof d[e]=="string")return e}}var a=["Moz","Webkit","Khtml","O","Ms"];return b}(),e=d("transform"),f=document.documentElement,g=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),h=[{name:"csstransforms",getResult:function(){return!!e}},{name:"csstransforms3d",getResult:function(){var a=!!d("perspective");if(a){var b=document.createElement("style"),c=document.createElement("div"),e="@media ("+g.join("transform-3d),(")+"modernizr)";b.textContent=e+"{#modernizr{height:3px}}",(document.head||document.getElementsByTagName("head")[0]).appendChild(b),c.id="modernizr",f.appendChild(c),a=c.offsetHeight===3,b.parentNode.removeChild(b),c.parentNode.removeChild(c)}return!!a}},{name:"csstransitions",getResult:function(){return!!d("transitionProperty")}}],i,j=h.length;if(a.Modernizr)for(i=0;i<j;i++){var k=h[i];Modernizr.hasOwnProperty(k.name)||Modernizr.addTest(k.name,k.getResult)}else a.Modernizr=function(){var a={_version:"1.6ish: miniModernizr for Isotope"},b=[],c,d,e;for(i=0;i<j;i++)c=h[i],d=c.getResult(),a[c.name]=d,e=(d?"":"no-")+c.name,b.push(e);f.className+=" "+b.join(" ");return a}();if(Modernizr.csstransforms){var l=Modernizr.csstransforms3d?{translate:function(a){return"translate3d("+a[0]+"px, "+a[1]+"px, 0) "},scale:function(a){return"scale3d("+a+", "+a+", 1) "}}:{translate:function(a){return"translate("+a[0]+"px, "+a[1]+"px) "},scale:function(a){return"scale("+a+") "}},m=function(a,c,d){var f=b(a),g=f.data("isoTransform")||{},h={},i,j={},k;h[c]=d,b.extend(g,h);for(i in g)k=g[i],j[i]=l[i](k);var m=j.translate||"",n=j.scale||"",o=m+n;f.data("isoTransform",g),a.style[e]=o};b.cssNumber.scale=!0,b.cssHooks.scale={set:function(a,b){typeof b=="string"&&(b=parseFloat(b)),m(a,"scale",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.scale?d.scale:1}},b.fx.step.scale=function(a){b.cssHooks.scale.set(a.elem,a.now+a.unit)},b.cssNumber.translate=!0,b.cssHooks.translate={set:function(a,b){m(a,"translate",b)},get:function(a,c){var d=b.data(a,"isoTransform");return d&&d.translate?d.translate:[0,0]}}}var n=b.event,o;n.special.smartresize={setup:function(){b(this).bind("resize",n.special.smartresize.handler)},teardown:function(){b(this).unbind("resize",n.special.smartresize.handler)},handler:function(a,b){var c=this,d=arguments;a.type="smartresize",o&&clearTimeout(o),o=setTimeout(function(){jQuery.event.handle.apply(c,d)},b==="execAsap"?0:100)}},b.fn.smartresize=function(a){return a?this.bind("smartresize",a):this.trigger("smartresize",["execAsap"])},b.Isotope=function(a,c){this.element=b(c),this._create(a),this._init()};var p=["overflow","position","width","height"];b.Isotope.settings={resizable:!0,layoutMode:"masonry",containerClass:"isotope",itemClass:"isotope-item",hiddenClass:"isotope-hidden",hiddenStyle:Modernizr.csstransforms&&!b.browser.opera?{opacity:0,scale:.001}:{opacity:0},visibleStyle:Modernizr.csstransforms&&!b.browser.opera?{opacity:1,scale:1}:{opacity:1},animationEngine:b.browser.opera?"jquery":"best-available",animationOptions:{queue:!1,duration:800},sortBy:"original-order",sortAscending:!0,resizesContainer:!0,transformsEnabled:!0,itemPositionDataEnabled:!1},b.Isotope.prototype={_create:function(c){this.options=b.extend(!0,{},b.Isotope.settings,c),this.styleQueue=[],this.elemCount=0;var d=this.element[0].style;this.originalStyle={};for(var e=0,f=p.length;e<f;e++){var g=p[e];this.originalStyle[g]=d[g]||null}this.element.css({overflow:"hidden",position:"relative"}),this._updateAnimationEngine(),this._updateUsingTransforms();var h={"original-order":function(a,b){return b.elemCount}};this.options.getSortData=b.extend(this.options.getSortData,h),this.reloadItems();var i=b(document.createElement("div"));this.element.prepend(i),this.posTop=Math.round(i.position().top),this.posLeft=Math.round(i.position().left),i.remove();var j=this;setTimeout(function(){j.element.addClass(j.options.containerClass)},0),this.options.resizable&&b(a).bind("smartresize.isotope",function(){j.resize()})},_getAtoms:function(a){var b=this.options.itemSelector,c=b?a.filter(b).add(a.find(b)):a,d={position:"absolute"};this.usingTransforms&&(d.left=0,d.top=0),c.css(d).addClass(this.options.itemClass),this.updateSortData(c,!0);return c},_init:function(a){this.$filteredAtoms=this._filter(this.$allAtoms),this._sort(),this.reLayout(a)},option:function(a,c){if(b.isPlainObject(a)){this.options=b.extend(!0,this.options,a);var d;for(d in a)this._updateOption(d)}else this.options[a]=c,this._updateOption(a)},_updateOption:function(a){var b="_update"+a.charAt(0).toUpperCase()+a.slice(1);this[b]&&this[b]()},_updateAnimationEngine:function(){var a=this.options.animationEngine.toLowerCase().replace(/[ _\-]/g,"");switch(a){case"css":case"none":this.isUsingJQueryAnimation=!1;break;case"jquery":this.isUsingJQueryAnimation=!0;break;default:this.isUsingJQueryAnimation=!Modernizr.csstransitions}this._updateUsingTransforms()},_updateTransformsEnabled:function(){this._updateUsingTransforms()},_updateUsingTransforms:function(){this.usingTransforms=this.options.transformsEnabled&&Modernizr.csstransforms&&Modernizr.csstransitions&&!this.isUsingJQueryAnimation,this.getPositionStyles=this.usingTransforms?this._translate:this._positionAbs},_filter:function(a){var b,c=this.options.filter===""?"*":this.options.filter;if(!c)b=a;else{var d=this.options.hiddenClass,e="."+d,f=a.not(e),g=a.filter(e),h=g;b=a.filter(c);if(c!=="*"){h=g.filter(c);var i=f.not(c).toggleClass(d);i.addClass(d),this.styleQueue.push({$el:i,style:this.options.hiddenStyle})}this.styleQueue.push({$el:h,style:this.options.visibleStyle}),h.removeClass(d)}return b},updateSortData:function(a,c){var d=this,e=this.options.getSortData,f,g;a.each(function(){f=b(this),g={};for(var a in e)g[a]=e[a](f,d);f.data("isotope-sort-data",g),c&&d.elemCount++})},_sort:function(){var a=this.options.sortBy,b=this._getSorter,c=this.options.sortAscending?1:-1,d=function(d,e){var f=b(d,a),g=b(e,a);f===g&&a!=="original-order"&&(f=b(d,"original-order"),g=b(e,"original-order"));return(f>g?1:f<g?-1:0)*c};this.$filteredAtoms.sort(d)},_getSorter:function(a,c){return b(a).data("isotope-sort-data")[c]},_translate:function(a,b){return{translate:[a,b]}},_positionAbs:function(a,b){return{left:a,top:b}},_pushPosition:function(a,b,c){var d=this.getPositionStyles(b,c);this.styleQueue.push({$el:a,style:d}),this.options.itemPositionDataEnabled&&a.data("isotope-item-position",{x:b,y:c})},layout:function(a,c){var d=this.options.layoutMode;this["_"+d+"Layout"](a);if(this.options.resizesContainer){var e=this["_"+d+"GetContainerSize"]();this.styleQueue.push({$el:this.element,style:e})}var f=this.isLaidOut?this.isUsingJQueryAnimation?"animate":"css":"css",g=this.options.animationOptions;b.each(this.styleQueue,function(a,b){b.$el[f](b.style,g)}),this.styleQueue=[],c&&c.call(a),this.isLaidOut=!0},resize:function(){this["_"+this.options.layoutMode+"Resize"]()},reLayout:function(a){this["_"+this.options.layoutMode+"Reset"](),this.layout(this.$filteredAtoms,a)},addItems:function(a,b){var c=this._getAtoms(a);this.$allAtoms=this.$allAtoms.add(c),b&&b(c)},insert:function(a,b){this.element.append(a);var c=this;this.addItems(a,function(a){var b=c._filter(a);c.$filteredAtoms=c.$filteredAtoms.add(b)}),this._sort(),this.reLayout(b)},appended:function(a,b){var c=this;this.addItems(a,function(a){c.$filteredAtoms=c.$filteredAtoms.add(a),c.layout(a,b)})},reloadItems:function(){this.$allAtoms=this._getAtoms(this.element.children())},remove:function(a){this.$allAtoms=this.$allAtoms.not(a),this.$filteredAtoms=this.$filteredAtoms.not(a),a.remove()},_shuffleArray:function(a){var b,c,d=a.length;if(d)while(--d)c=~~(Math.random()*(d+1)),b=a[c],a[c]=a[d],a[d]=b;return a},shuffle:function(a){this.options.sortBy="shuffle",this.$allAtoms=this._shuffleArray(this.$allAtoms),this.$filteredAtoms=this._filter(this.$allAtoms),this.reLayout(a)},destroy:function(){var c=this.usingTransforms;this.$allAtoms.removeClass(this.options.hiddenClass+" "+this.options.itemClass).each(function(){this.style.position=null,this.style.top=null,this.style.left=null,this.style.opacity=null,c&&(this.style[e]=null)});var d=this.element[0].style;for(var f=0,g=p.length;f<g;f++){var h=p[f];d[h]=this.originalStyle[h]}this.element.unbind(".isotope").removeClass(this.options.containerClass).removeData("isotope"),b(a).unbind(".isotope")},_getSegments:function(a,b){var c=b?"rowHeight":"columnWidth",d=b?"height":"width",e=b?"Height":"Width",f=b?"rows":"cols",g,h;this[d]=this.element[d](),h=this.options[a]&&this.options[a][c]||this.$filteredAtoms["outer"+e](!0)||this[d],g=Math.floor(this[d]/h),g=Math.max(g,1),this[a][f]=g,this[a][c]=h},_masonryPlaceBrick:function(a,b,c){var d=Math.min.apply(Math,c),e=d+a.outerHeight(!0),f=c.length,g=f,h=this.masonry.cols+1-f,i,j;while(f--)c[f]===d&&(g=f);i=this.masonry.columnWidth*g+this.posLeft,j=d,this._pushPosition(a,i,j);for(f=0;f<h;f++)this.masonry.colYs[g+f]=e},_masonryLayout:function(a){var c=this;a.each(function(){var a=b(this),d=Math.ceil(a.outerWidth(!0)/c.masonry.columnWidth);d=Math.min(d,c.masonry.cols);if(d===1)c._masonryPlaceBrick(a,c.masonry.cols,c.masonry.colYs);else{var e=c.masonry.cols+1-d,f=[],g,h;for(h=0;h<e;h++)g=c.masonry.colYs.slice(h,h+d),f[h]=Math.max.apply(Math,g);c._masonryPlaceBrick(a,e,f)}})},_masonryReset:function(){this.masonry={},this._getSegments("masonry");var a=this.masonry.cols;this.masonry.colYs=[];while(a--)this.masonry.colYs.push(this.posTop)},_masonryResize:function(){var a=this.masonry.cols;this._getSegments("masonry"),this.masonry.cols!==a&&this.reLayout()},_masonryGetContainerSize:function(){var a=Math.max.apply(Math,this.masonry.colYs)-this.posTop;return{height:a}},_fitRowsLayout:function(a){this.width=this.element.width();var c=this;a.each(function(){var a=b(this),d=a.outerWidth(!0),e=a.outerHeight(!0),f,g;c.fitRows.x!==0&&d+c.fitRows.x>c.width&&(c.fitRows.x=0,c.fitRows.y=c.fitRows.height),f=c.fitRows.x+c.posLeft,g=c.fitRows.y+c.posTop,c._pushPosition(a,f,g),c.fitRows.height=Math.max(c.fitRows.y+e,c.fitRows.height),c.fitRows.x+=d})},_fitRowsReset:function(){this.fitRows={x:0,y:0,height:0}},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={},this._getSegments("cellsByRow"),this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(!0)},_cellsByRowLayout:function(a){var c=this,d=this.cellsByRow.cols;this.cellsByRow.atomsLen=a.length,a.each(function(a){var e=b(this),f=(a%d+.5)*c.cellsByRow.columnWidth-e.outerWidth(!0)/2+c.posLeft,g=(~~(a/d)+.5)*c.cellsByRow.rowHeight-e.outerHeight(!0)/2+c.posTop;c._pushPosition(e,f,g)})},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow"),this.cellsByRow.cols!==a&&this.reLayout()},_straightDownReset:function(){this.straightDown={y:0}},_straightDownLayout:function(a){var c=this;a.each(function(a){var d=b(this),e=c.straightDown.y+c.posTop;c._pushPosition(d,c.posLeft,e),c.straightDown.y+=d.outerHeight(!0)})},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout()},_masonryHorizontalPlaceBrick:function(a,b,c){var d=Math.min.apply(Math,c),e=d+a.outerWidth(!0),f=c.length,g=f,h=this.masonryHorizontal.rows+1-f,i,j;while(f--)c[f]===d&&(g=f);i=d,j=this.masonryHorizontal.rowHeight*g+this.posTop,this._pushPosition(a,i,j);for(f=0;f<h;f++)this.masonryHorizontal.rowXs[g+f]=e},_masonryHorizontalLayout:function(a){var c=this;a.each(function(){var a=b(this),d=Math.ceil(a.outerHeight(!0)/c.masonryHorizontal.rowHeight);d=Math.min(d,c.masonryHorizontal.rows);if(d===1)c._masonryHorizontalPlaceBrick(a,c.masonryHorizontal.rows,c.masonryHorizontal.rowXs);else{var e=c.masonryHorizontal.rows+1-d,f=[],g,h;for(h=0;h<e;h++)g=c.masonryHorizontal.rowXs.slice(h,h+d),f[h]=Math.max.apply(Math,g);c._masonryHorizontalPlaceBrick(a,e,f)}})},_masonryHorizontalReset:function(){this.masonryHorizontal={},this._getSegments("masonryHorizontal",!0);var a=this.masonryHorizontal.rows;this.masonryHorizontal.rowXs=[];while(a--)this.masonryHorizontal.rowXs.push(this.posLeft)},_masonryHorizontalResize:function(){var a=this.masonryHorizontal.rows;this._getSegments("masonryHorizontal",!0),this.masonryHorizontal.rows!==a&&this.reLayout()},_masonryHorizontalGetContainerSize:function(){var a=Math.max.apply(Math,this.masonryHorizontal.rowXs)-this.posLeft;return{width:a}},_fitColumnsReset:function(){this.fitColumns={x:0,y:0,width:0}},_fitColumnsLayout:function(a){var c=this;this.height=this.element.height(),a.each(function(){var a=b(this),d=a.outerWidth(!0),e=a.outerHeight(!0),f,g;c.fitColumns.y!==0&&e+c.fitColumns.y>c.height&&(c.fitColumns.x=c.fitColumns.width,c.fitColumns.y=0),f=c.fitColumns.x+c.posLeft,g=c.fitColumns.y+c.posTop,c._pushPosition(a,f,g),c.fitColumns.width=Math.max(c.fitColumns.x+d,c.fitColumns.width),c.fitColumns.y+=e})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={},this._getSegments("cellsByColumn",!0),this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(!0)},_cellsByColumnLayout:function(a){var c=this,d=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length,a.each(function(a){var e=b(this),f=(~~(a/d)+.5)*c.cellsByColumn.columnWidth-e.outerWidth(!0)/2+c.posLeft,g=(a%d+.5)*c.cellsByColumn.rowHeight-e.outerHeight(!0)/2+c.posTop;c._pushPosition(e,f,g)})},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a=this.cellsByColumn.rows;this._getSegments("cellsByColumn",!0),this.cellsByColumn.rows!==a&&this.reLayout()},_straightAcrossReset:function(){this.straightAcross={x:0}},_straightAcrossLayout:function(a){var c=this;a.each(function(a){var d=b(this),e=c.straightAcross.x+c.posLeft;c._pushPosition(d,e,c.posTop),c.straightAcross.x+=d.outerWidth(!0)})},_straightAcrossGetContainerSize:function(){return{width:this.straightAcross.x+this.posLeft}},_straightAcrossResize:function(){this.reLayout()}},b.fn.imagesLoaded=function(a){var b=this.find("img"),d=b.length,e=this;b.length||a.call(this),b.bind("load",function(){--d<=0&&a.call(e)}).each(function(){if(this.complete||this.complete===c){var a=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",this.src=a}});return this},b.fn.isotope=function(a){if(typeof a=="string"){var c=Array.prototype.slice.call(arguments,1);this.each(function(){var d=b.data(this,"isotope");if(!d)return b.error("cannot call methods on isotope prior to initialization; attempted to call method '"+a+"'");if(!b.isFunction(d[a])||a.charAt(0)==="_")return b.error("no such method '"+a+"' for isotope instance");d[a].apply(d,c)})}else this.each(function(){var c=b.data(this,"isotope");c?(c.option(a||{}),c._init()):b.data(this,"isotope",new b.Isotope(a,this))});return this}})(window,jQuery);