Javascript将无序列表转换为多列

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理想的选择.

在这里查看演示.

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

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