[onotole]

Доброй ночи, коллеги,

столкнулся с задачей сортировки группы элементов DOM для отображения в две или три колонки в зависимости от ширины окна браузера пользователя. В проекте используется Bootstrap. Вот такой простенький HTML отобразит данные в две или три колонки в зависимости от ширины окна браузера (у всех вложенных div-ов есть CSS свойство {float: left}).

<div id="list">
	<div data-count="7" class="col-xs-6 col-lg-4">07</div>
	<div data-count="8" class="col-xs-6 col-lg-4">08</div>
	<div data-count="9" class="col-xs-6 col-lg-4">09</div>
	<div data-count="10" class="col-xs-6 col-lg-4">10</div>
	<div data-count="11" class="col-xs-6 col-lg-4">11</div>
	<div data-count="12" class="col-xs-6 col-lg-4">12</div>
	<div data-count="1" class="col-xs-6 col-lg-4">01</div>
	<div data-count="2" class="col-xs-6 col-lg-4">02</div>
	<div data-count="3" class="col-xs-6 col-lg-4">03</div>
	<div data-count="4" class="col-xs-6 col-lg-4">04</div>
	<div data-count="5" class="col-xs-6 col-lg-4">05</div>
	<div data-count="6" class="col-xs-6 col-lg-4">06</div>
	<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>

Задача отсортировать элементы так, чтобы "на выходе" вывод в три колонки выглядел так

1	6	11
2	7	12
3	8	13
4	9	
5	10

Ну, и в две соответственно так

1	8
2	9
3	10
4	11
5	12
6	13
7

Задача для меня оказалась непосильной, прошу помощи у гуру. Пока что у меня получилось следующее:

function sortList()
{
	var data = $("#list > div");

	// Сначала сортируем элементы по порядку
	// по аттрибуту 'data-count'

	data.sort(function (a, b)
	{
		a = parseInt($(a).attr('data-count'), 10);
		b = parseInt($(b).attr('data-count'), 10);

		if(a > b)
		{
			return 1;
		}
		else if(a < b)
		{
			return -1;
		}
		else
		{
			return 0;
		}
	});

	var result = {};
	var cols = 3; // К-во колонок
	var rows = Math.ceil($(data).size()/cols);
	var prev;
	var i = 0;

	for(var row = 1; row <= rows; row++)
	{
		for(var col = 1; col <= cols; col++)
		{
			var index = (col == 1) ? row : row + (rows * (col - 1));
			index--;

			if(index in data)
			{
				result[i] = data[index];
				i++;
			}
			else
			{
				// Здесь нужно как-то добавить пустой
				// элемент <div class="col-xs-6 col-lg-4"></div>
				// но как ?????????
				// $(result[i-1]).after('<div class="col-xs-6 col-lg-4">-</div>'); НЕ РАБОТАЕТ

			}
		}
	}

	$('#list').html(result);
}

Не знаю, насколько данный код оптимален, но он работает, за исключением того, что я не придумал как добавить новый элемент пустышку