JAVASCRIPT 30
Masonry-horizontal.js Guest on 17th September 2020 10:14:23 PM
  1. /*!
  2.  * masonryHorizontal layout mode for Isotope
  3.  * v2.0.0
  4.  * http://isotope.metafizzy.co/layout-modes/masonryhorizontal.html
  5.  */
  6.  
  7. /*jshint browser: true, strict: true, undef: true, unused: true */
  8.  
  9. ( function( window, factory ) {
  10.   'use strict';
  11.   // universal module definition
  12.   if ( typeof define === 'function' && define.amd ) {
  13.     // AMD
  14.     define( [
  15.         'get-size/get-size',
  16.         'isotope-layout/js/layout-mode'
  17.       ],
  18.       factory );
  19.   } else if ( typeof module == 'object' && module.exports ) {
  20.     // CommonJS
  21.     module.exports = factory(
  22.       require('get-size'),
  23.       require('isotope-layout/js/layout-mode')
  24.     );
  25.   } else {
  26.     // browser global
  27.     factory(
  28.       window.getSize,
  29.       window.Isotope.LayoutMode
  30.     );
  31.   }
  32.  
  33. }( window, function factory( getSize, LayoutMode ) {
  34. 'use strict';
  35.  
  36. // -------------------------- definition -------------------------- //
  37.  
  38.   // create an Outlayer layout class
  39.   var MasonryHorizontal = LayoutMode.create('masonryHorizontal');
  40.   var proto = MasonryHorizontal.prototype;
  41.  
  42.   proto._resetLayout = function() {
  43.     this.getRowHeight();
  44.     this._getMeasurement( 'gutter', 'outerHeight' );
  45.  
  46.     this.rowHeight += this.gutter;
  47.     // measure rows
  48.     this.rows = Math.floor( ( this.isotope.size.innerHeight + this.gutter ) / this.rowHeight );
  49.     this.rows = Math.max( this.rows, 1 );
  50.  
  51.     // reset row Xs
  52.     var i = this.rows;
  53.     this.rowXs = [];
  54.     while (i--) {
  55.       this.rowXs.push( 0 );
  56.     }
  57.  
  58.     this.maxX = 0;
  59.   };
  60.  
  61.   proto._getItemLayoutPosition = function( item ) {
  62.     item.getSize();
  63.     // how many rows does this brick span
  64.     var remainder = item.size.outerHeight % this.rowHeight;
  65.     var mathMethod = remainder && remainder < 1 ? 'round' : 'ceil';
  66.     // round if off by 1 pixel, otherwise use ceil
  67.     var rowSpan = Math[ mathMethod ]( item.size.outerHeight / this.rowHeight );
  68.     rowSpan = Math.min( rowSpan, this.rows );
  69.  
  70.     var rowGroup = this._getRowGroup( rowSpan );
  71.     // get the minimum X value from the rows
  72.     var minimumX = Math.min.apply( Math, rowGroup );
  73.     var shortRowIndex = rowGroup.indexOf( minimumX );
  74.  
  75.     // position the brick
  76.     var position = {
  77.       x: minimumX,
  78.       y: this.rowHeight * shortRowIndex
  79.     };
  80.  
  81.     // apply setHeight to necessary rows
  82.     var setWidth = minimumX + item.size.outerWidth;
  83.     var setSpan = this.rows + 1 - rowGroup.length;
  84.     for ( var i = 0; i < setSpan; i++ ) {
  85.       this.rowXs[ shortRowIndex + i ] = setWidth;
  86.     }
  87.  
  88.     return position;
  89.   };
  90.  
  91.   /**
  92.    * @param {Number} rowSpan - number of rows the element spans
  93.    * @returns {Array} rowGroup
  94.    */
  95.   proto._getRowGroup = function( rowSpan ) {
  96.     if ( rowSpan < 2 ) {
  97.       // if brick spans only one row, use all the row Xs
  98.       return this.rowXs;
  99.     }
  100.  
  101.     var rowGroup = [];
  102.     // how many different places could this brick fit horizontally
  103.     var groupCount = this.rows + 1 - rowSpan;
  104.     // for each group potential horizontal position
  105.     for ( var i = 0; i < groupCount; i++ ) {
  106.       // make an array of rowX values for that one group
  107.       var groupRowXs = this.rowXs.slice( i, i + rowSpan );
  108.       // and get the max value of the array
  109.       rowGroup[i] = Math.max.apply( Math, groupRowXs );
  110.     }
  111.     return rowGroup;
  112.   };
  113.  
  114.   proto._manageStamp = function( stamp ) {
  115.     var stampSize = getSize( stamp );
  116.     var offset = this.isotope._getElementOffset( stamp );
  117.     // get the rows that this stamp affects
  118.     var firstY = this._getOption('originTop') ? offset.top : offset.bottom;
  119.     var lastY = firstY + stampSize.outerHeight;
  120.     var firstRow = Math.floor( firstY / this.rowHeight );
  121.     firstRow = Math.max( 0, firstRow );
  122.     var lastRow = Math.floor( lastY / this.rowHeight );
  123.     lastRow = Math.min( this.rows - 1, lastRow );
  124.     // set rowXs to outside edge of the stamp
  125.     var stampMaxX = ( this._getOption('originLeft') ? offset.left : offset.right ) +
  126.       stampSize.outerWidth;
  127.     for ( var i = firstRow; i <= lastRow; i++ ) {
  128.       this.rowXs[i] = Math.max( stampMaxX, this.rowXs[i] );
  129.     }
  130.   };
  131.  
  132.   proto._getContainerSize = function() {
  133.     this.maxX = Math.max.apply( Math, this.rowXs );
  134.  
  135.     return {
  136.       width: this.maxX
  137.     };
  138.   };
  139.  
  140.   proto.needsResizeLayout = function() {
  141.     return this.needsVerticalResizeLayout();
  142.   };
  143.  
  144.   return MasonryHorizontal;
  145.  
  146. }));

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.