Ordenando lista html ul/li en bloques verticales alfabéticos

Question

Aquí hay un problema que encuentro de vez en cuando, que normalmente trato de resolver desde una perspectiva de back-end, pero me gustaría saber si hay una solución mágica que otros hayan encontrado resolver esto en el frente.

Dada una lista ul/li, siempre en el marcado por orden alfabético, de 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> 

Por lo general, es muy fácil flotar los artículos dejados y ordenarlos visual horizontal en bloques, como por ejemplo:

Sin embargo, para obtener columnas, así:

Siempre he tenido que dividir el HTML en entidades separadas, como cuatro elementos <ul> separados en el ejemplo anterior.

¿Hay alguna manera de mantenerlo todo en una lista ul sin ningún marcado adicional, usando solo CSS (sin JavaScript) para obtener un aspecto columnar como la segunda imagen de arriba? Mi suposición es "no", pero he visto algo de magia antes, y me gustaría responder a esto de manera más definitiva.

Answer 1

Todavía no tengo miedo.

CSS3 tiene algunas características interesantes, véase por ejemplo http://www.quirksmode.org/css/multicolumn.html pero Internet Explorer no lo soporta y yo no sé cómo el apoyo en IE9 será (según Microsoft inexistente en la versión beta por el momento)

Answer 2

Puede utilizar diseños de múltiples columnas de CSS3 y su relleno policrible: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Answer 3

Lo necesitaba hoy y escribí este equivalente de python. Puedes escribir 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

Si lo estás haciendo en PHP se puede utilizar un simple contador y %. Me las he arreglado para lograr esto en WordPress obtener una lista de las taxonomías personalizadas de este 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> 

También puede bucle a través de una matriz y acheive la misma cosa. De salida se ve algo como:

a f 
b g 
c h 
d i 
e j