Sortierung html ul/li Liste in alphabetischen vertikalen Blöcken

Question

Hier ist ein Problem, dass ich hin und wieder stolpere, dass ich normalerweise versuche und löse aus einer Backend-Perspektive, aber würde gerne wissen, ob es eine magische Lösung gibt, die andere gefunden haben löse dies am vorderen Ende.

eine ul/li Liste Gegeben im alphabetischen Markup versehen, von 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> 

Normalerweise ist es sehr einfach die Elemente zu schweben links und sortieren sie in Blöcke visuell horizontal, wie solche:

jedoch zu Spalten zu erhalten, wie folgt aus:

Ich musste das HTML immer in separate Entitäten aufteilen, wie zum Beispiel vier separate <ul> Elemente im obigen Beispiel.

Gibt es eine Möglichkeit, alles in einer UL-Liste ohne zusätzliches Markup zu halten, indem Sie nur CSS (kein JavaScript) verwenden, um ein säulenartiges Aussehen wie das zweite Bild oben zu erhalten? Meine Vermutung ist "Nein", aber ich habe schon etwas Magie gesehen, und ich würde das gerne definitiv beantworten.

Answer 1

Noch nicht ich habe Angst.

CSS3 hat einige nette Features, siehe zum Beispiel http://www.quirksmode.org/css/multicolumn.html aber Internet Explorer es nicht unterstützt, und ich weiß nicht, wie die Unterstützung in IE9 wird (nach Microsoft nicht existent in der Beta im Moment)

Answer 2

Sie können CSS3 Multicolumn Layouts und seine Polyfill verwenden: https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

Answer 3

Ich brauchte es heute und schrieb dieses Python-Äquivalent. Sie können mit nativem Javascript schreiben.

# -*- 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

Wenn Sie es in PHP tun können Sie einen einfachen Zähler und % verwenden. Ich habe es geschafft, dies in WordPress zu erreichen eine Liste der benutzerdefinierten Taxonomien immer etwa so:

<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> 

Sie können auch Schleife durch eine Anordnung und die gleiche Sache acheive. Die Ausgabe sieht so etwas wie:

a f 
b g 
c h 
d i 
e j