按字母顺序垂直分块排序HTML ul/li列表

Question

我偶尔遇到一个问题，通常我会从后端的角度来解决它，但我想知道是否有其他人发现了在前端解决这个问题的神奇解决方案。

给定一个ul/li列表，按字母顺序从a到z提供在标记中：

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

通常，很容易将项目向左浮动并在块中水平排序，如下所示： 然而，要获得列，就像这样： 我总是不得不将HTML分解成单独的实体，例如上面示例中的四个单独的

元素。

有没有办法保持所有内容在一个ul列表中，不需要任何额外的标记，并仅使用CSS（无JavaScript）来获得类似于上面第二张图片的列式外观？ 我的猜测是“不行”，但我以前见过一些魔法，我想更明确地回答这个问题。

- arxpoetica

---

这是我能找到的最好的关于此的信息： http://novitskisoftware.com/test/multiplecolumnsEms.html - user755420

尝试这个，不是我想出来的 https://dev59.com/DGzXa4cB1Zd3GeqPPQgP - user4911297

Answer 1

很抱歉，目前还没有这个功能。

CSS3有一些很棒的特性，例如http://www.quirksmode.org/css/multicolumn.html，但是Internet Explorer不支持它，我不知道IE9的支持情况（根据Microsoft的说法，在测试版中并不存在）。

- jeroen

---

抱怨，抱怨，#@!%^& IE，抱怨... :p - arxpoetica

“Multicolumn”（https://www.w3.org/TR/css-multicol-1/）并未涉及排序方面的内容。 - ceving

@ceving 这个列表已经被排序好了，原始问题(6年前...)是要将结果以列的形式展示出来。 - jeroen

Answer 2

如果您使用 PHP，可以使用一个简单的计数器和 %。在 WordPress 中，我已经成功地获取了自定义分类法列表，如下所示：

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

您也可以循环遍历数组并实现相同的效果。输出看起来像这样：

a    f
b    g
c    h
d    i
e    j

- Romes

Answer 3

我今天需要它，所以写了这个 Python 等效的代码。你可以使用原生 JavaScript 编写。

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

- Berkant AYDIN

Answer 4

你可以使用CSS3多列布局及其Polyfill：https://github.com/gryzzly/CSS-Multi-column-Layout-Module-Polyfill

- zen.c

---

这应该是jQuery的插件。 - Ricardo Zea