https://followyournola.com/bower_components/masonry/masonry.js

1/*!
2 * Masonry v4.0.0
3 * Cascading grid layout library
4 * http://masonry.desandro.com
5 * MIT License
6 * by David DeSandro
7 */
8
9( function( window, factory ) {
10  // universal module definition
11  /* jshint strict: false */ /*globals define, module, require */
12  if ( typeof define == 'function' && define.amd ) {
13    // AMD
14    define( [
15        'outlayer/outlayer',
16        'get-size/get-size'
17      ],
18      factory );
19  } else if ( typeof module == 'object' && module.exports ) {
20    // CommonJS
21    module.exports = factory(
22      require('outlayer'),
23      require('get-size')
24    );
25  } else {
26    // browser global
27    window.Masonry = factory(
28      window.Outlayer,
29      window.getSize
30    );
31  }
32
33}( window, function factory( Outlayer, getSize ) {
34
35'use strict';
36
37// -------------------------- masonryDefinition -------------------------- //
38
39  // create an Outlayer layout class
40  var Masonry = Outlayer.create('masonry');
41  // isFitWidth -> fitWidth
42  Masonry.compatOptions.fitWidth = 'isFitWidth';
43
44  Masonry.prototype._resetLayout = function() {
45    this.getSize();
46    this._getMeasurement( 'columnWidth', 'outerWidth' );
47    this._getMeasurement( 'gutter', 'outerWidth' );
48    this.measureColumns();
49
50    // reset column Y
51    this.colYs = [];
52    for ( var i=0; i < this.cols; i++ ) {
53      this.colYs.push( 0 );
54    }
55
56    this.maxY = 0;
57  };
58
59  Masonry.prototype.measureColumns = function() {
60    this.getContainerWidth();
61    // if columnWidth is 0, default to outerWidth of first item
62    if ( !this.columnWidth ) {
63      var firstItem = this.items[0];
64      var firstItemElem = firstItem && firstItem.element;
65      // columnWidth fall back to item of first element
66      this.columnWidth = firstItemElem && getSize( firstItemElem ).outerWidth ||
67        // if first elem has no width, default to size of container
68        this.containerWidth;
69    }
70
71    var columnWidth = this.columnWidth += this.gutter;
72
73    // calculate columns
74    var containerWidth = this.containerWidth + this.gutter;
75    var cols = containerWidth / columnWidth;
76    // fix rounding errors, typically with gutters
77    var excess = columnWidth - containerWidth % columnWidth;
78    // if overshoot is less than a pixel, round up, otherwise floor it
79    var mathMethod = excess && excess < 1 ? 'round' : 'floor';
80    cols = Math[ mathMethod ]( cols );
81    this.cols = Math.max( cols, 1 );
82  };
83
84  Masonry.prototype.getContainerWidth = function() {
85    // container is parent if fit width
86    var isFitWidth = this._getOption('fitWidth');
87    var container = isFitWidth ? this.element.parentNode : this.element;
88    // check that this.size and size are there
89    // IE8 triggers resize on body size change, so they might not be
90    var size = getSize( container );
91    this.containerWidth = size && size.innerWidth;
92  };
93
94  Masonry.prototype._getItemLayoutPosition = function( item ) {
95    item.getSize();
96    // how many columns does this brick span
97    var remainder = item.size.outerWidth % this.columnWidth;
98    var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
99    // round if off by 1 pixel, otherwise use ceil
100    var colSpan = Math[ mathMethod ]( item.size.outerWidth / this.columnWidth );
101    colSpan = Math.min( colSpan, this.cols );
102
103    var colGroup = this._getColGroup( colSpan );
104    // get the minimum Y value from the columns
105    var minimumY = Math.min.apply( Math, colGroup );
106    var shortColIndex = colGroup.indexOf( minimumY );
107
108    // position the brick
109    var position = {
110      x: this.columnWidth * shortColIndex,
111      y: minimumY
112    };
113
114    // apply setHeight to necessary columns
115    var setHeight = minimumY + item.size.outerHeight;
116    var setSpan = this.cols + 1 - colGroup.length;
117    for ( var i = 0; i < setSpan; i++ ) {
118      this.colYs[ shortColIndex + i ] = setHeight;
119    }
120
121    return position;
122  };
123
124  /**
125   * @param {Number} colSpan - number of columns the element spans
126   * @returns {Array} colGroup
127   */
128  Masonry.prototype._getColGroup = function( colSpan ) {
129    if ( colSpan < 2 ) {
130      // if brick spans only one column, use all the column Ys
131      return this.colYs;
132    }
133
134    var colGroup = [];
135    // how many different places could this brick fit horizontally
136    var groupCount = this.cols + 1 - colSpan;
137    // for each group potential horizontal position
138    for ( var i = 0; i < groupCount; i++ ) {
139      // make an array of colY values for that one group
140      var groupColYs = this.colYs.slice( i, i + colSpan );
141      // and get the max value of the array
142      colGroup[i] = Math.max.apply( Math, groupColYs );
143    }
144    return colGroup;
145  };
146
147  Masonry.prototype._manageStamp = function( stamp ) {
148    var stampSize = getSize( stamp );
149    var offset = this._getElementOffset( stamp );
150    // get the columns that this stamp affects
151    var isOriginLeft = this._getOption('originLeft');
152    var firstX = isOriginLeft ? offset.left : offset.right;
153    var lastX = firstX + stampSize.outerWidth;
154    var firstCol = Math.floor( firstX / this.columnWidth );
155    firstCol = Math.max( 0, firstCol );
156    var lastCol = Math.floor( lastX / this.columnWidth );
157    // lastCol should not go over if multiple of columnWidth #425
158    lastCol -= lastX % this.columnWidth ? 0 : 1;
159    lastCol = Math.min( this.cols - 1, lastCol );
160    // set colYs to bottom of the stamp
161
162    var isOriginTop = this._getOption('originTop');
163    var stampMaxY = ( isOriginTop ? offset.top : offset.bottom ) +
164      stampSize.outerHeight;
165    for ( var i = firstCol; i <= lastCol; i++ ) {
166      this.colYs[i] = Math.max( stampMaxY, this.colYs[i] );
167    }
168  };
169
170  Masonry.prototype._getContainerSize = function() {
171    this.maxY = Math.max.apply( Math, this.colYs );
172    var size = {
173      height: this.maxY
174    };
175
176    if ( this._getOption('fitWidth') ) {
177      size.width = this._getContainerFitWidth();
178    }
179
180    return size;
181  };
182
183  Masonry.prototype._getContainerFitWidth = function() {
184    var unusedCols = 0;
185    // count unused columns
186    var i = this.cols;
187    while ( --i ) {
188      if ( this.colYs[i] !== 0 ) {
189        break;
190      }
191      unusedCols++;
192    }
193    // fit container to columns that have been used
194    return ( this.cols - unusedCols ) * this.columnWidth - this.gutter;
195  };
196
197  Masonry.prototype.needsResizeLayout = function() {
198    var previousWidth = this.containerWidth;
199    this.getContainerWidth();
200    return previousWidth != this.containerWidth;
201  };
202
203  return Masonry;
204
205}));