Ordinamento lista html ul/li in blocchi verticali alfabetici

Question

Ecco un problema che mi capita di tanto in tanto, che di solito provo a risolvere da una prospettiva back-end, ma vorrei sapere se c'è una soluzione magica che altri hanno trovato risolvere questo sul front-end.

Dato un elenco ul/li, previsto nel codice alfabetico, da az:

<ul> 
    <li>Alpha</li> 
    <li>Bravo</li> 
    <li>Charlie</li> 
    <li>Delta</li> 
    <li>Echo</li> 
    <li>Foxtrot</li> 
    <li>Golf</li> 
    <li>Hotel</li> 
    <li>India</li> 
    <li>Juliet</li> 
    <li>Kilo</li> 
    <li>Lima</li> 
    <li>Mike</li> 
    <li>November</li> 
    <li>Oscar</li> 
    <li>Papa</li> 
    <li>Quebec</li> 
    <li>Romeo</li> 
    <li>Sierra</li> 
    <li>Tango</li> 
    <li>Uniform</li> 
    <li>Victor</li> 
    <li>Whiskey</li> 
    <li>X-ray</li> 
    <li>Yankee</li> 
    <li>Zulu</li> 
</ul> 

Tipicamente, è molto facile galleggiare gli oggetti lasciati e ordinare visivamente orizzontale in blocchi, come ad esempio:

Tuttavia, per ottenere le colonne, in questo modo:

Ho sempre dovuto suddividere l'HTML in entità separate, ad esempio quattro elementi separati <ul> nell'esempio precedente.

C'è un modo per mantenere tutto in una lista senza alcun markup aggiuntivo, utilizzando solo CSS (no JavaScript) per ottenere un aspetto colonnare come la seconda immagine sopra? La mia ipotesi è "no", ma prima ho visto un po 'di magia e mi piacerebbe rispondere in modo più definitivo.

Answer 1

Non ho ancora paura.

CSS3 ha alcune caratteristiche molto interessanti, si veda per esempio http://www.quirksmode.org/css/multicolumn.html ma Internet Explorer non supporta e Io non so come il supporto in IE9 sarà (secondo Microsoft inesistente nella beta al momento)

Answer 2

È possibile utilizzare i layout multicolonna CSS3 e il relativo polyfill: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Answer 3

Ne avevo bisogno oggi e ho scritto questo equivalente python. Puoi scrivere con javascript nativo.

# -*- coding: utf8 -*- 
import math 
# --------------------- EDIT THIS PART 
#define columns 
c = 4 
# you can define to alphabetical list here 
# i used to numbers, because range func. very effective for testing 
list = range(1, 26, 1) 
# ---------------------- END OF EDIT 
# firstly sort 

list = sorted(list) 

# calculate total row 
r = int(math.ceil(len(list)/c)) + (1 if len(list) % c is not 0 else 0) 

index = 0 
table1 = [] 
for x in range(c): 
    table1.append([]) 
    for y in range(r): 
     if len(list) > index: 
      table1[x].append(y) 
      table1[x][y] = list[index] 
      index += 1 


res = '' 
for i in range(r): 
    for x in table1: 
     try: 
      #print x[i] 
      res += "%s\t|\t" % x[i] 
     except IndexError: 
      res += "%s\t|\t" % "_" 
      pass 
    res += "\n" 

#print table1 
print res 

https://github.com/berkantaydin/vertical-alphabetical-sorting-with-columns

Answer 4

Se si sta facendo in PHP è possibile utilizzare un semplice contatore e %. Sono riuscito a raggiungere questo obiettivo in WordPress ottenere un elenco di tassonomie personalizzati in questo modo:

<div class="row gutters"> 

    <?php $taxos = get_categories (array('taxonomy' => 'make')); ?> 

    <?php $count = 0; ?> 

    <div class="col col_2"> 

     <ul> 

      <?php foreach($taxos as $tax) : ?> 

       <li><a href="/make/<?php echo $tax->slug; ?>"><?php echo $tax->name; ?></a></li> 

       <?php $count++; ?> 

       <?php if($count % 5 == 0) echo '</div></ul><div class="col col_2"><ul>'; ?> 

      <?php endforeach; ?> 

     </ul> 

    </div> 

</div> 

È possibile anche scorrere una matrice e acheive la stessa cosa. Uscita sembra qualcosa di simile:

a f 
b g 
c h 
d i 
e j