From d5b08b749650745e04410e3ded45822148ffcf78 Mon Sep 17 00:00:00 2001 From: Jason Xie Date: Wed, 25 Feb 2015 01:42:32 +0800 Subject: [PATCH] Added logic to process equal height Adding logic to process equal height for fitRows, tested only with normal layouting, some glitch in ajax fetched content + appended, need testing when filtering applied --- js/layout-modes/fit-rows.js | 81 +++++++++++++++++++++++++++++++++++-- 1 file changed, 77 insertions(+), 4 deletions(-) diff --git a/js/layout-modes/fit-rows.js b/js/layout-modes/fit-rows.js index abee4b2..f9b69a2 100644 --- a/js/layout-modes/fit-rows.js +++ b/js/layout-modes/fit-rows.js @@ -10,32 +10,105 @@ FitRows.prototype._resetLayout = function() { this.x = 0; this.y = 0; this.maxY = 0; + this.row = 0; + this.rows = []; this._getMeasurement( 'gutter', 'outerWidth' ); + + if (this.options.equalheight) { + for (var i=0; i < this.isotope.items.length; i++) { + this.isotope.items[i].css({ + height: 'auto' + }); + } + } }; +/** + * Working but glicthy with newly appended element via ajax + * must reinvoke isotope('layout') to properly realign the horizontal position + * after isotope('appended), not sure why? + */ FitRows.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); - - var itemWidth = item.size.outerWidth + this.gutter; + + var itemWidth = item.size.outerWidth; + // if this element cannot fit in the current row - var containerWidth = this.isotope.size.innerWidth + this.gutter; + // need to add extra pixel to avoid layout dropping in some edge + // bootstrap grid in firefox + var containerWidth = Math.ceil(this.isotope.size.innerWidth + 1; + if ( this.x !== 0 && itemWidth + this.x > containerWidth ) { this.x = 0; this.y = this.maxY; } + + // New row? + if (this.x == 0 && this.y != 0) { + this.row++; + } var position = { x: this.x, y: this.y }; - this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight ); + this.maxY = Math.max(this.maxY, this.y + item.size.outerHeight); this.x += itemWidth; + + + // Compare Y from this row and previous row + if (typeof this.rows[this.row] == 'undefined') { + this.rows[this.row] = []; + this.rows[this.row].start = this.y; + this.rows[this.row].end = this.maxY; + } + else { + this.rows[this.row].end = Math.max(this.rows[this.row].end, this.maxY); + } + + // Record row number to item + item.row = this.row; return position; }; + +FitRows.prototype._equalHeight = function() { + + // Should we use this.isotope.filteredItems or this.isotope.items? + + for (var i=0; i < this.isotope.items.length; i++) { + var row = this.isotope.items[i].row, + data = this.rows[row]; + + if (data) { + var height = data.end - data.start; + + height -= this.isotope.items[i].size.borderTopWidth + this.isotope.items[i].size.borderBottomWidth; + height -= this.isotope.items[i].size.marginTop + this.isotope.items[i].size.marginBottom; + height -= this.gutter.height || 0; + + if (this.isotope.items[i].size.isBorderBox == false) { + height -= this.isotope.items[i].size.paddingTop + this.isotope.items[i].size.paddingBottom; + } + + this.isotope.items[i].size.height = height; + + this.isotope.items[i].css({ + height : height.toString() + 'px', + }); + } + } +} + + FitRows.prototype._getContainerSize = function() { + if (this.options.equalheight) { + this._equalHeight(); + } + return { height: this.maxY }; };