diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2016-01-21 22:35:24 +0100 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2016-01-21 22:35:24 +0100 |
commit | bcb9ca95518126131a16fcde894fc8765e7ab010 (patch) | |
tree | bc1e0e8a5b99ffbf8cd4165c6872fd4468f547bd /js/vendor/masonry | |
parent | 59daa89e4c82860d6b16b4e4bebab1eb8c302153 (diff) |
more explore
Diffstat (limited to 'js/vendor/masonry')
-rw-r--r-- | js/vendor/masonry/.bower.json | 51 | ||||
-rw-r--r-- | js/vendor/masonry/README.mdown | 80 | ||||
-rw-r--r-- | js/vendor/masonry/bower.json | 41 | ||||
-rw-r--r-- | js/vendor/masonry/masonry.js | 205 |
4 files changed, 377 insertions, 0 deletions
diff --git a/js/vendor/masonry/.bower.json b/js/vendor/masonry/.bower.json new file mode 100644 index 000000000..463331a4c --- /dev/null +++ b/js/vendor/masonry/.bower.json @@ -0,0 +1,51 @@ +{ + "name": "masonry", + "version": "4.0.0", + "description": "Cascading grid layout library", + "main": "masonry.js", + "dependencies": { + "get-size": "~2.0.2", + "outlayer": "~2.0.0" + }, + "devDependencies": { + "jquery-bridget": "~2.0.0", + "qunit": "^1.12", + "jquery": ">=1.4.3 <4" + }, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + "sandbox/", + "CONTRIBUTING.mdown", + "gulpfile.js", + "package.json" + ], + "homepage": "http://masonry.desandro.com", + "authors": [ + "David DeSandro" + ], + "keywords": [ + "masonry", + "layout", + "outlayer" + ], + "license": "MIT", + "moduleType": [ + "amd", + "globals", + "node" + ], + "_release": "4.0.0", + "_resolution": { + "type": "version", + "tag": "v4.0.0", + "commit": "707ac6eebf112b2413cee2e9ed6457fba346cabc" + }, + "_source": "git://github.com/desandro/masonry.git", + "_target": "~4.0.0", + "_originalSource": "masonry", + "_direct": true +}
\ No newline at end of file diff --git a/js/vendor/masonry/README.mdown b/js/vendor/masonry/README.mdown new file mode 100644 index 000000000..23e737980 --- /dev/null +++ b/js/vendor/masonry/README.mdown @@ -0,0 +1,80 @@ +# Masonry + +_Cascading grid layout library_ + +Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. + +See [masonry.desandro.com](http://masonry.desandro.com) for complete docs and demos. + +## Install + +### Download + ++ [masonry.pkgd.js](https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.js) un-minified, or ++ [masonry.pkgd.min.js](https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.min.js) minified + +### CDN + +Link directly to Masonry files on [npmcdn](https://npmcdn.com/). + +``` html +<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script> +<!-- or --> +<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script> +``` + +### Package managers + +Bower: `bower install masonry --save` + +[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save` + +## Initialize + +With jQuery + +``` js +$('.grid').masonry({ + // options... + itemSelector: '.grid-item', + columnWidth: 200 +}); +``` + +With vanilla JavaScript + +``` js +// vanilla JS +// init with element +var grid = document.querySelector('.grid'); +var msnry = new Masonry( grid, { + // options... + itemSelector: '.grid-item', + columnWidth: 200 +}); + +// init with selector +var msnry = new Masonry( '.grid', { + // options... +}); +``` + +With HTML + +Add a `data-masonry` attribute to your element. Options can be set in JSON in the value. + +``` html +<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'> + <div class="grid-item"></div> + <div class="grid-item"></div> + ... +</div> +``` + +## License + +Masonry is released under the [MIT license](http://desandro.mit-license.org). Have at it. + +* * * + +Made by David DeSandro diff --git a/js/vendor/masonry/bower.json b/js/vendor/masonry/bower.json new file mode 100644 index 000000000..7226f1e16 --- /dev/null +++ b/js/vendor/masonry/bower.json @@ -0,0 +1,41 @@ +{ + "name": "masonry", + "version": "4.0.0", + "description": "Cascading grid layout library", + "main": "masonry.js", + "dependencies": { + "get-size": "~2.0.2", + "outlayer": "~2.0.0" + }, + "devDependencies": { + "jquery-bridget": "~2.0.0", + "qunit": "^1.12", + "jquery": ">=1.4.3 <4" + }, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + "sandbox/", + "CONTRIBUTING.mdown", + "gulpfile.js", + "package.json" + ], + "homepage": "http://masonry.desandro.com", + "authors": [ + "David DeSandro" + ], + "keywords": [ + "masonry", + "layout", + "outlayer" + ], + "license": "MIT", + "moduleType": [ + "amd", + "globals", + "node" + ] +} diff --git a/js/vendor/masonry/masonry.js b/js/vendor/masonry/masonry.js new file mode 100644 index 000000000..309017746 --- /dev/null +++ b/js/vendor/masonry/masonry.js @@ -0,0 +1,205 @@ +/*! + * Masonry v4.0.0 + * Cascading grid layout library + * http://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +( function( window, factory ) { + // universal module definition + /* jshint strict: false */ /*globals define, module, require */ + if ( typeof define == 'function' && define.amd ) { + // AMD + define( [ + 'outlayer/outlayer', + 'get-size/get-size' + ], + factory ); + } else if ( typeof module == 'object' && module.exports ) { + // CommonJS + module.exports = factory( + require('outlayer'), + require('get-size') + ); + } else { + // browser global + window.Masonry = factory( + window.Outlayer, + window.getSize + ); + } + +}( window, function factory( Outlayer, getSize ) { + +'use strict'; + +// -------------------------- masonryDefinition -------------------------- // + + // create an Outlayer layout class + var Masonry = Outlayer.create('masonry'); + // isFitWidth -> fitWidth + Masonry.compatOptions.fitWidth = 'isFitWidth'; + + Masonry.prototype._resetLayout = function() { + this.getSize(); + this._getMeasurement( 'columnWidth', 'outerWidth' ); + this._getMeasurement( 'gutter', 'outerWidth' ); + this.measureColumns(); + + // reset column Y + this.colYs = []; + for ( var i=0; i < this.cols; i++ ) { + this.colYs.push( 0 ); + } + + this.maxY = 0; + }; + + Masonry.prototype.measureColumns = function() { + this.getContainerWidth(); + // if columnWidth is 0, default to outerWidth of first item + if ( !this.columnWidth ) { + var firstItem = this.items[0]; + var firstItemElem = firstItem && firstItem.element; + // columnWidth fall back to item of first element + this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth || + // if first elem has no width, default to size of container + this.containerWidth; + } + + var columnWidth = this.columnWidth += this.gutter; + + // calculate columns + var containerWidth = this.containerWidth + this.gutter; + var cols = containerWidth / columnWidth; + // fix rounding errors, typically with gutters + var excess = columnWidth - containerWidth % columnWidth; + // if overshoot is less than a pixel, round up, otherwise floor it + var mathMethod = excess && excess < 1 ? 'round' : 'floor'; + cols = Math[ mathMethod ]( cols ); + this.cols = Math.max( cols, 1 ); + }; + + Masonry.prototype.getContainerWidth = function() { + // container is parent if fit width + var isFitWidth = this._getOption('fitWidth'); + var container = isFitWidth ? this.element.parentNode : this.element; + // check that this.size and size are there + // IE8 triggers resize on body size change, so they might not be + var size = getSize( container ); + this.containerWidth = size && size.innerWidth; + }; + + Masonry.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + // how many columns does this brick span + var remainder = item.size.outerWidth % this.columnWidth; + var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil'; + // round if off by 1 pixel, otherwise use ceil + var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth ); + colSpan = Math.min( colSpan, this.cols ); + + var colGroup = this._getColGroup( colSpan ); + // get the minimum Y value from the columns + var minimumY = Math.min.apply( Math, colGroup ); + var shortColIndex = colGroup.indexOf( minimumY ); + + // position the brick + var position = { + x: this.columnWidth * shortColIndex, + y: minimumY + }; + + // apply setHeight to necessary columns + var setHeight = minimumY + item.size.outerHeight; + var setSpan = this.cols + 1 - colGroup.length; + for ( var i = 0; i < setSpan; i++ ) { + this.colYs[ shortColIndex + i ] = setHeight; + } + + return position; + }; + + /** + * @param {Number} colSpan - number of columns the element spans + * @returns {Array} colGroup + */ + Masonry.prototype._getColGroup = function( colSpan ) { + if ( colSpan < 2 ) { + // if brick spans only one column, use all the column Ys + return this.colYs; + } + + var colGroup = []; + // how many different places could this brick fit horizontally + var groupCount = this.cols + 1 - colSpan; + // for each group potential horizontal position + for ( var i = 0; i < groupCount; i++ ) { + // make an array of colY values for that one group + var groupColYs = this.colYs.slice( i, i + colSpan ); + // and get the max value of the array + colGroup[i] = Math.max.apply( Math, groupColYs ); + } + return colGroup; + }; + + Masonry.prototype._manageStamp = function( stamp ) { + var stampSize = getSize( stamp ); + var offset = this._getElementOffset( stamp ); + // get the columns that this stamp affects + var isOriginLeft = this._getOption('originLeft'); + var firstX = isOriginLeft ? offset.left : offset.right; + var lastX = firstX + stampSize.outerWidth; + var firstCol = Math.floor( firstX / this.columnWidth ); + firstCol = Math.max( 0, firstCol ); + var lastCol = Math.floor( lastX / this.columnWidth ); + // lastCol should not go over if multiple of columnWidth #425 + lastCol -= lastX % this.columnWidth ? 0 : 1; + lastCol = Math.min( this.cols - 1, lastCol ); + // set colYs to bottom of the stamp + + var isOriginTop = this._getOption('originTop'); + var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) + + stampSize.outerHeight; + for ( var i = firstCol; i <= lastCol; i++ ) { + this.colYs[i] = Math.max( stampMaxY, this.colYs[i] ); + } + }; + + Masonry.prototype._getContainerSize = function() { + this.maxY = Math.max.apply( Math, this.colYs ); + var size = { + height: this.maxY + }; + + if ( this._getOption('fitWidth') ) { + size.width = this._getContainerFitWidth(); + } + + return size; + }; + + Masonry.prototype._getContainerFitWidth = function() { + var unusedCols = 0; + // count unused columns + var i = this.cols; + while ( --i ) { + if ( this.colYs[i] !== 0 ) { + break; + } + unusedCols++; + } + // fit container to columns that have been used + return ( this.cols - unusedCols ) * this.columnWidth - this.gutter; + }; + + Masonry.prototype.needsResizeLayout = function() { + var previousWidth = this.containerWidth; + this.getContainerWidth(); + return previousWidth != this.containerWidth; + }; + + return Masonry; + +})); |