Skip to content

Instantly share code, notes, and snippets.

@fredkelly
Created July 7, 2010 12:35
Show Gist options
  • Select an option

  • Save fredkelly/466628 to your computer and use it in GitHub Desktop.

Select an option

Save fredkelly/466628 to your computer and use it in GitHub Desktop.
/*************************************************
** jQuery Multi Column Lists version 1.0.5
** copyright Fred Kelly, licensed GPL & MIT
** http://fredkelly.net/
**************************************************/
(function($){
$.fn.multilists = function(options, callback) {
var defaults = {
cols: 2
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
$items = obj.children('li');
// don't waste time on empty lists
if ($items.size() > 1) {
// if no width set, container divided by columns
if (!options.colWidth) {
options.colWidth = Math.floor(obj.width()/options.cols);
}
// create our variables
var currentCol = 0;
var vertReturn = 0;
var maxHeight = 0;
// loop list items
$items.each(function(i) {
// negative top margin
if (i % Math.round($items.size()/options.cols) == 0 && i > 0) {
$(this).css('margin-top', -vertReturn);
if (vertReturn > maxHeight) {
maxHeight = vertReturn;
}
vertReturn = 0;
currentCol++;
}
// add left margin
if (currentCol > 0) {
$(this).css('margin-left', currentCol * (options.colWidth + ($(this).outerWidth(true) - $(this).width())) + 'px');
}
vertReturn += $(this).outerHeight();
});
// set height on containing list
obj.height(maxHeight);
}
// if the callback is a function, call it...
if (typeof callback == 'function') {
callback.call(this);
}
});
};
})(jQuery);
@fredkelly
Copy link
Copy Markdown
Author

Added allowance for left/right margin or padding on each list item.

@fredkelly
Copy link
Copy Markdown
Author

Fixed top margin bug added in previous version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment