Javascript将无序列表转换为多列

在（受良好支持的）css中似乎没有一种简单的方法可以做到这一点。我正在寻找javascript解决方案，最好是jQuery

我有这样一个无序列表：

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>        
    ...etc
</ul>

见本文：

XHTML的小圣杯之一 而CSS就是产生一个， 语义逻辑有序列表 换行到垂直列中

我会提前警告你的。如果你想 以多列形式显示列表， 你必须妥协。你可以 牺牲W3C web标准和使用 不推荐使用的标记，您可以接受 语义不完整的标记 从逻辑上讲，你可以容忍 你可以说，有内容的演示 告别浏览器兼容性，或者 您可以使用带有大量标记的标记 沉重的属性和样式 有规则。每条路都要收费

---

“最佳”解决方案是主观的，但我倾向于任意类。

您可能希望结合使用CSS和jQuery，但理论上它非常简单。在HTML中呈现完整的单个列表，然后通过jQuery提供包装器，并根据需要拆分列表。下面的函数就是这样做的。在实际使用脚本时，请确保使用比仅使用

ul

更具体的选择器。

id

将是理想的选择

jQuery（函数（$）{
变量大小=4，
$ul=$（“ul”），
$lis=$ul.children（）.filter（':gt（+（大小-1）+'），
loop=Math.ceil（$lis.length/size），
i=0；
$ul.css（'float'，'left'）。换行（“”）；
对于（；i”）.css（'float'，'left'）.append（$lis.slice（i*size，（i*size）+size））.insertAfter（$ul）；
}
});

如果您想将列表拆分为子列表，Doug的解决方案很好

相反，我选择在不更改dom的情况下定位列表元素。 这有点混乱，基本上它在每个元素上都有一个左边距，即列数乘以列宽。 这将导致楼梯布局，因此下一步是添加一些负顶部边距，以使每个元素达到顶部

基本上，它显示为网格。我使用这个下拉菜单，所以它工作得很好。如果需要每个列表项具有动态高度，请避免使用此选项。col_height变量可以设置为最大项的高度，以使代码更具通用性

var col_max_height = 6; //Max Items per column
var col_width = 200; //Pixels
var col_height = 33; //Pixels
$('.header ul li ul').each(function() {
    $(this).find('li').each(function(index){
        column = parseInt(index/col_max_height);
        $(this).css('margin-left', column * col_width + 'px')
        if(column > 0) {
            $(this).css('margin-top', (index - (col_max_height * column)  + 1) * -col_height + 'px').addClass('col_'+column);
        }
    });
});

---

@凯奥，谢谢你的回答

我只需要做一些修改就可以了
（公式改变了，也许它可以帮助某人）

---

为此，我使用了一个名为“简易列表拆分器”的插件。以下是链接：

---

只是有点不同，它会向上移动下一列，而不是每一列

var col_max_height = 6; //Max Items per column
var col_width = 120; //Pixels
var prevCol = 0; 
$('.header ul').each(function() {
    $(this).find('li').each(function(index){
    column = parseInt(index/col_max_height);
    $(this).css('margin-left', column * col_width + 'px')
        if(prevCol != column) {
            $(this).css('margin-top',  '-92px').addClass('col_'+column);
            prevCol = column;
        } else {
            $(this).css('margin-top',  '0px').addClass('col_'+column);
        }
    });
});

---

你们可以很容易地做到这一点，比如用一个.mylist类拆分一个ul

$('.mylist').cols(2);

---

这里有一个不完全是我所需要的，但仍然是一个很好的解决方案。比一些jQuery列插件简单得多+1干得好。@Keyo，列表应该动态填充吗？不，但我不想更改任何现有的css。我使用的是一个下拉菜单，傻瓜鱼风格。通过将其拆分为3个列表，它将创建3个菜单链接。我想在一个div中包含一大堆

是无效的？我下面的解决方案是可行的，但它不是我承认的最干净的。这太棒了，我需要对行而不是列使用相同的方法，所以我调整了代码：谢谢！我在这里问之前读过。这是一篇非常好的文章，我使用了一个javascript修复程序，因为如果它降级，这不是一个大问题，我不想让html变得凌乱。不幸的是，Alist没有提供任何js解决方案。有什么理由让它成为一个

ul

？在我看来，如果你有行和列，你就有表格内容，你需要一个表格。我同意表格是用于表格数据的。这是一种数据类型（链接）的列表，本质上类似于表中的一列。这是怎样的表格？通过使用列表，我将布局分离到javascript中，而不是html中。如果css/javascript丢失，页面将有一个很好的嵌套列表，而不是愚蠢的表。下面是一个如何在jquery中使用jquery插件执行此操作的实例：jsfiddle.net/EebVF/5：github.com/fzondlo/jquery-columnsHow您是否将此设置为从每个新列的顶部开始？现在，当下一列有eg 2

项时，它们将显示在底部而不是顶部。所以基本上你必须从“利润率顶端：-300px”开始，等等。但是你怎么能做到呢？

var col_max_item = 2; //Max Items per column
var col_width = $('.header ul li').css('width').replace("px", "");  //Pixels, get width from CSS
var col_height = $('.header ul li').css('height').replace("px", ""); //Pixels, get height from CSS  

    $('.header ul').each(function() { 
        $(this).find('li').each(function(index){ 
            column = parseInt(index/col_max_item);
            $(this).css('margin-left', column * col_width + 'px')
            if(column > 0 && (index / col_max_item) == column) {
                $(this).css('margin-top', (col_max_item * col_height * -1)  + 'px').addClass('col_'+column);
            }
        });
    });

var col_max_height = 6; //Max Items per column
var col_width = 120; //Pixels
var prevCol = 0; 
$('.header ul').each(function() {
    $(this).find('li').each(function(index){
    column = parseInt(index/col_max_height);
    $(this).css('margin-left', column * col_width + 'px')
        if(prevCol != column) {
            $(this).css('margin-top',  '-92px').addClass('col_'+column);
            prevCol = column;
        } else {
            $(this).css('margin-top',  '0px').addClass('col_'+column);
        }
    });
});

$('.mylist').cols(2);