Lista Riordino di jQuery oggetti alle colonne

Question

Sto lavorando sulla funzione, che prende un select da HTML e lo sostituisce con più colonne ul - è una lista, ma ha float:left; sui bambini li, in modo che il numero di colonne si basa su calcoli (se la larghezza ul è 600 e larghezza li 200, io ovviamente have 3 colonne).

Questa è la teoria -. La parte più facile

Esempio : 5 articoli, 2 colonne

Ora, Quando prendo i dati da selezionare, ho questa lista:

 1
 2
 3
 4
 5

Se ho appena spingere l'array in ul, che sarà simile a questo sullo schermo:

1   2
3   4
5

Ma per l'utente / lettore, è più facile e meglio, quando non si legge Left->Bottom, ma piuttosto Bottom->Left, il che significa che stai leggendo fino inferiore della colonna e poi passare alla colonna successiva, piuttosto che leggere fila, quindi la prossima fila.

Quindi ho bisogno di trasformare la lista di colonne:

1   4
2   5
3

così, in realtà in ul sarà questo ordine:

1   4   2   5   3

E questo ha bisogno di lavorare con il numero di colonna variabile, poiché se decidiamo di aggiungere 10 elementi da elencare, potrebbe sembrare meglio con più colonne.

Qualsiasi aiuto con gli operatori necessari / cicli e la matematica coinvolti?

Grazie

Answer 1

Ho pensato che questo fosse un problema interessante, in modo da ho scritto un plugin per questo. Ho provato un po 'e sembra funzionare. Fatemi sapere se questo è ciò che si vuole!

http://jsbin.com/ocama/3/edit

http://jsbin.com/ocama/3

L'algoritmo è abbastanza semplice, è praticamente solo si riduce a scoprendo quante righe ci sono e colonne di raggruppamento in base a quel numero.

Answer 2

Se si sa quante colonne vi sono, allora si dovrebbe fare i vostri elementi <li> saltando attraverso l'elenco n alla volta. Così per tre colonne, si sceglie items 0, 3, 6, ... e poi tornare indietro e prendere 1, 4, 7 e poi 2, 5, 8.

Answer 3

L'ho fatto:]

Ho fatto tutto il calulation. Mi piace anche La soluzione di Alex, quindi gli darò una buona risposta, e aggiungo la mia soluzione qui solo per tutti coloro alla ricerca di questo tipo di problema:)

var rows= 2; //editable number of rows

$('body').append('<ul id="fromselect"></ul>');
var o = $('select#tolist option');
var ul = $('ul#fromselect');

var total = o.size();
var onecol = Math.ceil(total / rows);
var index = 0; //index in o list

for (var j=1; j<=onecol;j++){
    for (var i=1;i<=rows;i++){
        if (!(i*j>total)){ //in last row, there might be less columns used
            index = (i-1)*onecol+j-1;
            ul.append('<li><a href="#">'+index +': '+
                      o.eq(index ).text()
                     +'</a></li>');
            //index is used more for debug, you can put
            //the index calculation in o.eq( * ) part
        }
    }
}