From 57a7107f6854849ab6fc5f2d01951906d2853bb7 Mon Sep 17 00:00:00 2001
From: Jeremy Pyne <jpyne@proteusb2b.com>
Date: Tue, 5 Nov 2013 13:27:17 -0500
Subject: [PATCH] Added columnClassFunc option to specify class selectors for
 column sizing instead of widths. Added extraColumnClass for specifying extra
 column classes.

For example the following can be used if using a Grid Responsive layout system to make the layout revert to single column on mobile devices.

$("myContent").columnize({
	columns: 3,
	extraColumnClass: "s-grid-whole",
	columnClassFunc: function(col) {
		return "grid-" + (12/col);
	},
});
---
 README.md                |  8 ++++++++
 src/jquery.columnizer.js | 20 +++++++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 46a5628..5a4d25e 100644
--- a/README.md
+++ b/README.md
@@ -67,6 +67,14 @@ Columnizer will add CSS classes to the columns it creates. Each column will have
 <td style="text-align: right; padding-right: 10px;"><em>manualBreaks</em></td>
 <td style="padding-left: 10px;">Defaults to false. Set to true if you only want to create columns with manual column breaks. If true, then width, height, columns options are ignored.</td>
 </tr>
+<tr>
+<td style="text-align: right; padding-right: 10px;"><em>columnClassFunc</em></td>
+<td style="padding-left: 10px;">Optional function that will be called for each column to generate custom class selectors for sizing instead of inline width.<br>Eg: columnClassFunc: function(col) { return "grid-" + (12/col); }</td>
+</tr>
+<tr>
+<td style="text-align: right; padding-right: 10px;"><em>extraColumnClass</em></td>
+<td style="padding-left: 10px;">Extra classes to add to each column.</td>
+</tr>
 </tbody>
 </table>
 
diff --git a/src/jquery.columnizer.js b/src/jquery.columnizer.js
index 018bb2d..ea1eec6 100644
--- a/src/jquery.columnizer.js
+++ b/src/jquery.columnizer.js
@@ -1,4 +1,4 @@
-// version 1.6.0
+// version 1.6.1
 // http://welcome.totheinter.net/columnizer-jquery-plugin/
 // created by: Adam Wulf @adamwulf, adam.wulf@gmail.com
 
@@ -38,7 +38,11 @@
 		manualBreaks : false,
 		// previx for all the CSS classes used by this plugin
 		// default to empty string for backwards compatibility
-		cssClassPrefix : ""
+		cssClassPrefix : "",
+		// if set use columnClassFunc(colNum) to set width's with custom classes instead of fixed percentiles
+		columnClassFunc: false,
+		// extra classes to add to each column wrapper
+		extraColumnClass: false
 	};
 	options = $.extend(defaults, options);
 
@@ -301,6 +305,7 @@
 				+ prefixTheClassName("first") + " "
 				+ prefixTheClassName("last") + " "
 				+ prefixTheClassName("column") + " "
+				+ options.extraColumnClass + " "
 				+ "' style='width:100%; float: " + options.columnFloat + ";'></div>")); //"
 			$col = $inBox.children().eq($inBox.children().length-1);
 			$destroyable = $cache.clone(true);
@@ -396,9 +401,12 @@
 			if($inBox.data("columnizing")) return;
 			$inBox.data("columnized", true);
 			$inBox.data("columnizing", true);
+			
+			var targetWidth = !options.columnClassFunc ? "width:" + (Math.floor(100 / numCols))+ "%; " : "";
+			var targetClass = options.columnClassFunc ? options.columnClassFunc(numCols) : "";
 
 			$inBox.empty();
-			$inBox.append($("<div style='width:" + (Math.floor(100 / numCols))+ "%; float: " + options.columnFloat + ";'></div>")); //"
+			$inBox.append($("<div class='" + targetClass + "'" + targetWidth + "float: " + options.columnFloat + ";'></div>"));
 			$col = $inBox.children(":last");
 			$col.append($cache.clone());
 			maxHeight = $col.height();
@@ -441,7 +449,9 @@
 					className = (i === 0) ? prefixTheClassName("first") : "";
 					className += " " + prefixTheClassName("column");
 					className = (i == numCols - 1) ? (prefixTheClassName("last") + " " + className) : className;
-					$inBox.append($("<div class='" + className + "' style='width:" + (Math.floor(100 / numCols))+ "%; float: " + options.columnFloat + ";'></div>")); //"
+					className += options.extraColumnClass ? " " + options.extraColumnClass : "";
+					className += options.columnClassFunc ? " " + targetClass : "";
+					$inBox.append($("<div class='" + className + "' style='" + targetWidth + "float: " + options.columnFloat + ";'></div>"));
 				}
 
 				// fill all but the last column (unless overflowing)
@@ -449,7 +459,7 @@
 				while(i < numCols - (options.overflow ? 0 : 1) || scrollHorizontally && $destroyable.contents().length){
 					if($inBox.children().length <= i){
 						// we ran out of columns, make another
-						$inBox.append($("<div class='" + className + "' style='width:" + (Math.floor(100 / numCols))+ "%; float: " + options.columnFloat + ";'></div>")); //"
+						$inBox.append($("<div class='" + className + "' style='" + targetWidth + "float: " + options.columnFloat + ";'></div>"));
 					}
 					$col = $inBox.children().eq(i);
 					if(scrollHorizontally){