From b4556191fcc39017b1b148c58dad26c1dd46382c Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 19 Aug 2013 08:00:04 -0400 Subject: [PATCH] cells by row --- examples/cells-by-row.html | 214 +++++++++++++++++++++++++++++++++++ layout-mode.js | 3 +- layout-modes/cells-by-row.js | 81 +++++++++++++ 3 files changed, 296 insertions(+), 2 deletions(-) create mode 100644 examples/cells-by-row.html create mode 100644 layout-modes/cells-by-row.js diff --git a/examples/cells-by-row.html b/examples/cells-by-row.html new file mode 100644 index 0000000..0c12b39 --- /dev/null +++ b/examples/cells-by-row.html @@ -0,0 +1,214 @@ + + + + + + masonry + + + + + + + +

sorting

+ +
+

Sort

+ +
+ +
+ +
+

80

+

Hg

+

Mercury

+

200.59

+
+ +
+

52

+

Te

+

Tellurium

+

127.6

+
+ +
+

83

+

Bi

+

Bismuth

+

208.9804

+
+ +
+

48

+

Cd

+

Cadmium

+

112.411

+
+ +
+

20

+

Ca

+

Calcium

+

40.078

+
+ +
+

75

+

Re

+

Rhenium

+

186.207

+
+ +
+

81

+

Tl

+

Thallium

+

204.3833

+
+ +
+

51

+

Sb

+

Antimony

+

121.76

+
+ +
+

27

+

Co

+

Cobalt

+

58.933195

+
+ +
+

71

+

Lu

+

Lutetium

+

174.9668

+
+ +
+

18

+

Ar

+

Argon

+

39.948

+
+ +
+

37

+

Rb

+

Rubidium

+

85.4678

+
+ +
+

7

+

N

+

Nitrogen

+

14.0067

+
+ +
+

93

+

Np

+

Neptunium

+

(237)

+
+ +
+

89

+

Ac

+

Actinium

+

(227)

+
+
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/layout-mode.js b/layout-mode.js index e1e3daa..2895fa8 100644 --- a/layout-mode.js +++ b/layout-mode.js @@ -4,8 +4,6 @@ // -------------------------- -------------------------- // -// var Isotope = window.Isotope; - function layoutModeDefinition( Outlayer ) { var layoutMode = {}; @@ -13,6 +11,7 @@ var layoutMode = {}; layoutMode.modes = {}; layoutMode.create = function( namespace, options ) { + // layout mode class function LayoutMode( isotope ) { this.isotope = isotope; // link properties diff --git a/layout-modes/cells-by-row.js b/layout-modes/cells-by-row.js new file mode 100644 index 0000000..4d9ec9b --- /dev/null +++ b/layout-modes/cells-by-row.js @@ -0,0 +1,81 @@ +( function( window ) { + +'use strict'; + +function cellsByRowDefinition( layoutMode, getSize ) { + + var CellsByRow = layoutMode.create( 'cellsByRow' ); + + var __resetLayout = CellsByRow.prototype._resetLayout; + + CellsByRow.prototype._resetLayout = function() { + // call super + __resetLayout.call( this ); + 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; + } + + this.cols = Math.floor( containerSize.innerWidth / this.columnWidth ); + this.cols = Math.max( this.cols, 1 ); + + }; + + CellsByRow.prototype._getItemLayoutPosition = function( item ) { + item.getSize(); + var col = this.itemIndex % this.cols; + var row = Math.floor( this.itemIndex / this.cols ); + // 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 }; + }; + + CellsByRow.prototype._getContainerSize = function() { + return { + height: ( this.itemIndex / this.cols ) * this.rowHeight + }; + }; + + return CellsByRow; + +} + +if ( typeof define === 'function' && define.amd ) { + // AMD + define( [ + '../layout-mode', + 'get-size/get-size' + ], + cellsByRowDefinition ); +} else { + // browser global + cellsByRowDefinition( + window.Isotope.layoutMode, + window.getSize + ); +} + + +})( window ); + +