fit rows layout mode working

.jshintrc

@@ -0,0 +1,10 @@
+{
+  "browser": true,
+  "devel": true,
+  "strict": true,
+  "undef": true,
+  "unused": true,
+  "predef": {
+    "define": false
+  }
+}

examples/basic.html

@@ -36,25 +36,24 @@
     <div class="item"></div>
   </div>
 
-<script src="../components/classie/classie.js"></script>
+<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
-<script src="../components/eventEmitter/EventEmitter.js"></script>
+<script src="../bower_components/eventie/eventie.js"></script>
-<script src="../components/eventEmitter/EventEmitter.min.js"></script>
+<script src="../bower_components/doc-ready/doc-ready.js"></script>
-<script src="../components/eventie/eventie.js"></script>
+<script src="../bower_components/get-style-property/get-style-property.js"></script>
-<script src="../components/doc-ready/doc-ready.js"></script>
+<script src="../bower_components/get-size/get-size.js"></script>
-<script src="../components/get-style-property/get-style-property.js"></script>
+<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
-<script src="../components/get-size/get-size.js"></script>
+<script src="../bower_components/matches-selector/matches-selector.js"></script>
-<script src="../components/jquery-bridget/jquery.bridget.js"></script>
+<script src="../bower_components/outlayer/item.js"></script>
-<script src="../components/matches-selector/matches-selector.js"></script>
+<script src="../bower_components/outlayer/outlayer.js"></script>
-<script src="../components/outlayer/item.js"></script>
+
-<script src="../components/outlayer/outlayer.js"></script>
+<script src="../isotope.js"></script>
-
+<script src="../layout-modes/fit-rows.js"></script>
-<script src="../masonry.js"></script>
 
 <script>
 docReady( function() {
   var container = document.querySelector('#basic');
-  var msnry = new Masonry( container, {
+  var iso = new Isotope( container, {
-    columnWidth: 60
+    layoutMode: 'fitRows'
   });
 });
 </script>

isotope.js

@@ -14,13 +14,15 @@
 // -------------------------- helpers -------------------------- //
 
 
-// -------------------------- masonryDefinition -------------------------- //
+// -------------------------- isotopeDefinition -------------------------- //
 
 // used for AMD definition and requires
 function isotopeDefinition( Outlayer, getSize, matchesSelector ) {
   // create an Outlayer layout class
   var Isotope = Outlayer.create('isotope');
 
+  Isotope.layoutModes = {};
+
   Isotope.prototype._create = function() {
     // call super
     Outlayer.prototype._create.call( this );
@@ -44,8 +46,8 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) {
   };
 
   Isotope.prototype.layout = function() {
-    this.filteredItems = this._filter( this.items );
+    // this.filteredItems = this._filter( this.items );
-    this._sort();
+    // this._sort();
     Outlayer.prototype.layout.call( this );
     // this._mode._resetLayout();
     // this._resetLayout();
@@ -120,20 +122,20 @@ function isotopeDefinition( Outlayer, getSize, matchesSelector ) {
   // -------------------------- methods -------------------------- //
 
   Isotope.prototype._resetLayout = function() {
-    this._mode._resetLayout();
+    this._mode()._resetLayout();
   };
 
   Isotope.prototype._getItemLayoutPosition = function( item ) {
-    return this._mode._getItemLayoutPosition( item );
+    return this._mode()._getItemLayoutPosition( item );
   };
 
 
   Isotope.prototype._manageStamp = function( stamp ) {
-    this._mode._manageStamp( stamp );
+    this._mode()._manageStamp( stamp );
   };
 
   Isotope.prototype._getContainerSize = function() {
-    return this._mode._getContainerSize();
+    return this._mode()._getContainerSize();
   };
 
   return Isotope;

layout-modes/fit-rows.js

@@ -0,0 +1,50 @@
+( function( window ) {
+
+'use strict';
+
+var Isotope = window.Isotope;
+var Outlayer = window.Outlayer;
+
+function FitRows( isotope, options ) {
+  this.isotope = isotope;
+  this.options = options;
+}
+
+FitRows.prototype._resetLayout = function() {
+  Outlayer.prototype._resetLayout.apply( this.isotope, arguments );
+  this.x = 0;
+  this.y = 0;
+  this.maxY = 0;
+};
+
+FitRows.prototype._getItemLayoutPosition = function( item ) {
+  item.getSize();
+
+  // if this element cannot fit in the current row
+  if ( this.x !== 0 && item.size.width + this.x > this.isotope.size.innerWidth ) {
+    this.x = 0;
+    this.y = this.maxY;
+  }
+
+  var position = {
+    x: this.x,
+    y: this.y
+  };
+
+  this.maxY = Math.max( this.maxY, this.y + item.size.outerHeight );
+  this.x += item.size.width;
+
+  return position;
+};
+
+FitRows.prototype._manageStamp = function() {
+  Outlayer.prototype._manageStamp.apply( this.isotope, arguments );
+};
+
+FitRows.prototype._getContainerSize = function() {
+  return { height: this.maxY };
+};
+
+Isotope.layoutModes.fitRows = FitRows;
+
+})( window );