Как я могу изменить этот алгоритм, который переупорядочивает <ul>?

Question

Фон :

Я задал этот вопрос вчера:

Как изменить ориентацию <ul>, охватывающего несколько столбцов?

спрашивает, как преобразовать список, подобный этому:

a  b  c

d  e  f

g  h  i

j  k  l

в список, подобный этому:

a  e  i

b  f  j

c  g  k

d  h  l

, и я получил этот удивительный ответ beeflavor : http://jsfiddle.net/H4FPw/12/

Проблема:

К сожалению, я не указал, что может быть любое количество элементов списка, поэтому егоОтвет жестко закодирован в 4 строки и использует алгоритм хитрых матриц (читай: черная магия ), который я не могу обернуть вокруг себя.

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

Это обновленный пример проблемы, которую я имею:Есть ли кто-нибудь с лучшей головой для этого, кто может дать мне направление в правильном направлении?

Answer 1

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

http://jsfiddle.net/AcdcD/

Если вам не нужно обрабатывать изменение размера, его можно немного упростить:

http://jsfiddle.net/AcdcD/1/

Может быть, вы можете использовать это, если у вас не хватает времени?

Answer 2

Плагин jQuery .transpose()

Именно то, что вы хотите, чтобы он делал.Мне нужно было то же самое, поэтому я написал общий плагин jQuery, который транспонирует все плавающие или встроенные блокированные элементы, которые кажутся в столбцах, но их порядок идет в строках.отправьте с примером транспонирования штатов США, а затем перейдите на GitHub , где поддерживается плагин, и вы также можете получить его уменьшенную версию (915 байт с версии 1.2).

Все, что вам нужно сделать, это:

$("yourSelector").transpose();

В вашем случае это будет

$("li").transpose();

Хорошо, что плагин проверяет, сколько столбцов там изначально (до транспонирования) и транспонирует к тому же количеству столбцов впоследствии.Он не добавляет никаких дополнительных элементов HTML в DOM (например, обертки с плавающими столбцами или аналогичные), он просто перестраивает существующие элементы.Это очень хорошо, когда дело доходит до настроек CSS страницы, потому что это никак не влияет на их форму или форму.

И также различает разные списки элементов (элементы, которые содержатся в разныхконтейнеры), как если бы у вас было два UL элемента, которые нужно переставить.Вам не нужно звонить .transpose() для каждого, потому что плагин сделает это за вас.Вы бы все равно просто использовали тот же селектор, что и ранее.

Answer 3

Я думаю, что проще представить элементы в виде 1-D списка (a, b, c ...) и подумать, как 1) получить это из исходного массива и 2) преобразовать его в выходной массив.

Шаг 1 прост, поскольку список в 1-D имеет тот же порядок, что и элементы <li> в источнике HTML.

Итак, предположим, что у нас есть n элементов, и мы хотим поместить их в R строк и C столбцов, но сначала заполним столбцы. Элемент, который находится в позиции (r, c) (на основе 0), является просто элементом # R*c + r. И, как указано выше, порядок в исходном файле является порядком в первой строке, или (0,0), (0,1), (0,2), ...

Если # элементов не полностью заполняет сетку RxC, то вам нужно добавить проверки, чтобы вычисляемый номер элемента не превышал n (самый простой способ - заполнить список пустыми элементами заранее).

В зависимости от требований к дизайну вы также можете адаптировать его, чтобы минимизировать количество пустых элементов при фиксированном количестве строк или столбцов.

Answer 4

Я считаю, что для заполнения пустого пространства необходимы пустые LI.

Это должно работать:

for(var i = 0; i<rowcount; i++){
    for(var j=0; j<colcount; j ++){
        var n = (j*rowcount)+i;
        if (ichild[n]) 
            k=k+wf+(ichild[n].innerHTML)+wb;
        else
           k = k + wf + wb
    }  
}  

Answer 5

А как насчет этого кода:

jsfiddle

// I add a number of new elements to the <ul>, in this case, 'm', 'n', 'o' &'p'

var rowcount = 6; // I increase rowcount from 4 to 6 to accommodate the new elements
var colcount = 3;
var ichild=$('.directory-result-list-bottom').children();
var wf= "<li class='directory-result-text'>";
var wb= "</li>"
var k="";
var u;
var v;
var carryover=0;

$('.directory-result-list-bottom').empty();

for(var i = 0; i<rowcount; i++){
    carryover=0;
    for(var j=0; j<colcount; j ++){
        k=k+wf+(ichild[(j*rowcount)+i].innerHTML)+wb;
    }  
}    
document.getElementById('place').innerHTML=k;