Created
February 1, 2012 08:05
-
-
Save yentsun/1715894 to your computer and use it in GitHub Desktop.
An example of even spreading of li elements (with child li elements) within a set number of columns using jQuery.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function(){ | |
var columns_no = 4; | |
$('.popup').each(function(){ | |
var total_height = $(this).find('li:not(.brands_column li)').length; | |
var column = $(this).find('.column1'); | |
var average_height = Math.ceil(total_height / columns_no); | |
column.data('height', 0); | |
var total_categories = $(this).find('li.depth1').length; | |
$(this).find('li.depth1').each(function(){ | |
if (total_categories == columns_no) { | |
do_append($(this), column) | |
column = cycle_column(column); | |
} else if (column.data('height') >= average_height) { | |
column = cycle_column(column); | |
do_append($(this), column); | |
} else { | |
do_append($(this), column); | |
} | |
}); | |
}); | |
}); | |
function do_append(category, column) { | |
var cat_height = category.find('li').length; | |
var to_add = 1; | |
if (cat_height == 1) | |
to_add = 2; | |
category.appendTo(column); | |
column.data('height',column.data('height') + cat_height + to_add); | |
} | |
function cycle_column(column) { | |
column = column.next(); | |
column.data('height', 0) | |
return column; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Visual representation: http://goo.gl/aC0wd