Ниже приведен колонизатор, принимающий в качестве аргумента количество колонок.
Звоните: $ (elem) .columnize (3)
http://jsfiddle.net/Bdsj9/28/
Протестировано в IE6 из wine в Ubuntu 10.04: работает (выглядит лучше, если вы увеличите ширину таблицы стилей, которую я позаимствовал у @micha - спасибо, кстати)
(function($) {
$.fn.decolumnize = function() {
this.children().map(function(index, el) {
var oldPos = null;
var posClass = null;
if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) {
oldPos = parseInt(posClass[0].replace("orig-readorder-", ""));
$(el).removeClass(posClass[0]);
}
return {
elm: el,
pos: oldPos ? oldPos : index
}
}).sort(function(a,b) {
return a.pos > b.pos ? 1 : -1;
}).map(function(index, ob) {
return ob.elm;
}).appendTo(this);
return this.children().css("float", "left").css("clear", "none");
};
$.fn.columnize = function(numcols) {
var numItems = this.children().length;
var divisor = Math.ceil(numItems / numcols);
var indexOfFinal = null;
this.decolumnize();
var resorted = this.children().map(function(index, el) {
return {
position: (index % divisor) + (index / numItems),
elm: el,
isFinal: index == numItems - 1,
origPos: index
};
}).sort(function(a, b) {
return a.position > b.position ? 1 : -1;
});
return resorted.map(function(index, ob) {
if (indexOfFinal) {
/** TODO: fix redundancy **/
if ((index - indexOfFinal - 1) % (numcols - 1) == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
} else {
/** TODO: fix redundancy **/
if (index % numcols == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
}
if (ob.isFinal) indexOfFinal = index;
$(ob.elm).addClass("orig-readorder-" + ob.origPos);
return ob.elm;
}).appendTo(this);
};
})(jQuery);
Сначала он вычисляет сортировщик, потому что при простом оформлении это не сработает. Чтобы рассчитать сортировщик, вам нужно знать количество столбцов заранее. Это вы можете использовать в качестве делителя, чтобы ввести 'clear: left'.
Кроме того, используя количество элементов списка и количество столбцов, необходимо оценить количество строк. Это можно использовать в качестве делителя для сортировки элементов на основе остатка между их индексом и количеством строк.
Для гранулирования сортировки также учитывается исходный индекс ...
После того, как последний оригинальный элемент был размещен, количество столбцов должно быть уменьшено на 1. Поэтому я сохраняю isFinal-boolean. Я уверен, что это можно сделать более элегантно с помощью некоторых интеллектуальных вычислений.
Затем введите 'clear: left' в нужном месте и сохраните исходную позицию в классе, чтобы вы могли прибегнуть к более поздней стадии (например, при динамическом добавлении или удалении элемента списка)
Best!