Question

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

我有一个这样的无序列表：

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

我希望每列都有一个高度，例如四个项目，并且垂直填充而不是像css float那样水平填充：

A     E
B     F
C
D

Answer 1

您将需要使用CSS和jQuery的组合，但理论上它非常简单。在HTML中呈现完整的单个列表，然后通过jQuery提供包装并根据需要拆分列表。以下功能就是这样做的。在实际使用脚本时，请务必使用比ul更具体的选择器。 id是理想的。

View demo here.

jQuery(function ($) {
  var size = 4,
      $ul  = $("ul"),
      $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
      loop = Math.ceil($lis.length / size),
      i    = 0;

  $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

  for (; i < loop; i = i + 1) {
    $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + size)).insertAfter($ul);
  }
});

Answer 2

参见这篇文章：

XHTML的一小部分圣杯   和CSS是生产一个，   语义逻辑有序列表   包裹成垂直列。
     我会在前面警告你。如果你想   在多列中显示一个列表，   你必须妥协。您可以   牺牲W3C Web标准并使用   弃用标记，你可以忍受   标记不是语义上的   合乎逻辑的，你可以容忍混合的   你可以说，有内容的演示文稿   告别浏览器兼容性，或   你可以使用沉重的标记   属性和样式很重   有规则。每条道路都会造成损失。

http://www.alistapart.com/articles/multicolumnlists/

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

Answer 3

如果你想将列表拆分成子列表，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);
        }
    });
});

Answer 4

@Keyo，谢谢你的回答。

只需进行一些修改即可使其在我的最终工作。
（公式改变了，也许它可以帮助某人）

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);
            }
        });
    });

Answer 5

为此我使用了一个名为“Easy List Splitter”的插件。这是链接：

http://www.madeincima.it/en/articles/resources-and-tools/easy-list-splitter-plugin/

Answer 6

稍微不同的是向上移动下一列，而不是每个li。

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);
        }
    });
});

Answer 7

您可以使用jQuery-Columns Plugin轻松完成此操作，例如将ul与您将要执行的.mylist类分开

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

这是live example on jsfiddle

Javascript将无序列表转换为多列

7 个答案: