diff --git a/js/layout-modes/fit-rows.js b/js/layout-modes/fit-rows.js
index 0bafc83..ae3fceb 100644
--- a/js/layout-modes/fit-rows.js
+++ b/js/layout-modes/fit-rows.js
@@ -10,13 +10,16 @@ FitRows.prototype._resetLayout = function() {
this.x = 0;
this.y = 0;
this.maxY = 0;
+ this._getMeasurement( 'gutter', 'outerWidth' );
};
FitRows.prototype._getItemLayoutPosition = function( item ) {
item.getSize();
+ var itemWidth = item.size.outerWidth + this.gutter;
// if this element cannot fit in the current row
- if ( this.x !== 0 && item.size.outerWidth + this.x > this.isotope.size.innerWidth ) {
+ var containerWidth = this.isotope.size.innerWidth + this.gutter;
+ if ( this.x !== 0 && itemWidth + this.x > containerWidth ) {
this.x = 0;
this.y = this.maxY;
}
@@ -27,7 +30,7 @@ FitRows.prototype._getItemLayoutPosition = function( item ) {
};
this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
- this.x += item.size.outerWidth;
+ this.x += itemWidth;
return position;
};
diff --git a/sandbox/fitrows.html b/sandbox/fitrows.html
new file mode 100644
index 0000000..0ba54b2
--- /dev/null
+++ b/sandbox/fitrows.html
@@ -0,0 +1,135 @@
+
+
+
+
+
+ fitRows
+
+
+
+
+
+
+
+
+ fitRows
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/fit-rows.js b/test/fit-rows.js
new file mode 100644
index 0000000..d299436
--- /dev/null
+++ b/test/fit-rows.js
@@ -0,0 +1,43 @@
+( function() {
+
+'use strict';
+
+test( 'fitRows', function() {
+
+ var iso = new Isotope( '#fitrows-gutter', {
+ layoutMode: 'fitRows',
+ itemSelector: '.item',
+ transitionDuration: 0
+ });
+
+ function checkPosition( item, x, y ) {
+ var elem = item.element;
+ var left = parseInt( elem.style.left, 10 );
+ var top = parseInt( elem.style.top, 10 );
+ deepEqual( [ left, top ], [ x, y ], 'item position ' + x + ', ' + y );
+ }
+
+ checkPosition( iso.items[0], 0, 0 );
+ checkPosition( iso.items[1], 60, 0 );
+
+ // check gutter
+ iso.options.fitRows = {
+ gutter: 10
+ };
+ iso.layout();
+
+ checkPosition( iso.items[0], 0, 0 );
+ checkPosition( iso.items[1], 70, 0 );
+
+ // check gutter, with element sizing
+ iso.options.fitRows = {
+ gutter: '.gutter-sizer'
+ };
+ iso.layout();
+
+ checkPosition( iso.items[0], 0, 0 );
+ checkPosition( iso.items[1], 78, 0 );
+
+});
+
+})();
diff --git a/test/index.html b/test/index.html
index a6803ea..a54bd85 100644
--- a/test/index.html
+++ b/test/index.html
@@ -21,7 +21,7 @@
-
+
@@ -39,6 +39,7 @@
+
@@ -121,5 +122,15 @@
+ fitRows
+
+
+