From 8aecc6653d385e219d6d2746aef42e44e4f47ae6 Mon Sep 17 00:00:00 2001
From: David DeSandro <desandrocodes@gmail.com>
Date: Mon, 26 Aug 2013 07:52:57 -0400
Subject: [PATCH] add cells by column

---
 examples/horizontal-layout-modes.html |  3 +-
 layout-modes/cells-by-column.js       | 80 +++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 layout-modes/cells-by-column.js

diff --git a/examples/horizontal-layout-modes.html b/examples/horizontal-layout-modes.html
index e26644e..6bab077 100644
--- a/examples/horizontal-layout-modes.html
+++ b/examples/horizontal-layout-modes.html
@@ -162,6 +162,7 @@
 <script src="../isotope.js"></script>
 <script src="../layout-modes/fit-columns.js"></script>
 <script src="../layout-modes/horizontal.js"></script>
+<script src="../layout-modes/cells-by-column.js"></script>
 
 <script>
 docReady( function() {
@@ -172,7 +173,7 @@ docReady( function() {
     horizontal: {
       verticalAlignment: 0.5
     },
-    cellsByRow: {
+    cellsByColumn: {
       columnWidth: 130,
       rowHeight: 140,
     },
diff --git a/layout-modes/cells-by-column.js b/layout-modes/cells-by-column.js
new file mode 100644
index 0000000..5e8f279
--- /dev/null
+++ b/layout-modes/cells-by-column.js
@@ -0,0 +1,80 @@
+( function( window ) {
+
+'use strict';
+
+function cellsByColumnDefinition( layoutMode, getSize ) {
+
+  var CellsByColumn = layoutMode.create( 'cellsByColumn' );
+
+  CellsByColumn.prototype._resetLayout = function() {
+    var containerSize = this.isotope.size;
+    this.itemIndex = 0;
+
+    this._getMeasurement( 'columnWidth', 'outerWidth' );
+    this._getMeasurement( 'rowHeight', 'outerHeight' );
+
+    var firstItem = this.items[0];
+    var firstItemSize = firstItem && firstItem.element && getSize( firstItem.element );
+
+    if ( !this.columnWidth ) {
+      // columnWidth fall back to item of first element
+      this.columnWidth = firstItemSize ? firstItemSize.outerWidth :
+        // or size of container
+        containerSize.innerWidth;
+    }
+
+    if ( !this.rowHeight ) {
+      // rowHeight fall back to item of first element
+      this.rowHeight = firstItemSize ? firstItemSize.outerHeight :
+        // or size of container
+        containerSize.innerHeight;
+    }
+    // set rows
+    this.rows = Math.floor( containerSize.innerHeight / this.rowHeight );
+    this.rows = Math.max( this.rows, 1 );
+  };
+
+  CellsByColumn.prototype._getItemLayoutPosition = function( item ) {
+    item.getSize();
+    var col = Math.floor( this.itemIndex / this.rows );
+    var row = this.itemIndex % this.rows;
+    // center item within cell
+    var x = ( col + 0.5 ) * this.columnWidth - item.size.outerWidth / 2;
+    var y = ( row + 0.5 ) * this.rowHeight - item.size.outerHeight / 2;
+    this.itemIndex++;
+    return { x: x, y: y };
+  };
+
+  CellsByColumn.prototype._getContainerSize = function() {
+    return {
+      width: Math.ceil( this.itemIndex / this.rows ) * this.columnWidth
+    };
+  };
+
+  CellsByColumn.prototype.resize = function() {
+    this.isotope.resizeVertical();
+  };
+
+  return CellsByColumn;
+
+}
+
+if ( typeof define === 'function' && define.amd ) {
+  // AMD
+  define( [
+      '../layout-mode',
+      'get-size/get-size'
+    ],
+    cellsByColumnDefinition );
+} else {
+  // browser global
+  cellsByColumnDefinition(
+    window.Isotope.layoutMode,
+    window.getSize
+  );
+}
+
+
+})( window );
+
+