Javascript 我想将列表项显示为两列或更多列（动态对齐）

我可以使用

float:left像这样


但是我想这样显示它（作为两列或更多列）


我该怎么做

@桑德普给出了很好的解决方案。不幸的是，它不适用于IE（需要ie7及以上版本）

有什么帮助吗
 为此，您可以使用
列计数
属性：

div#多列1{
-moz列数：2；
-moz柱间隙：50%；
-webkit列数：2；
-webkit柱间距：50%；
列数：3；
柱间距：50%；
}

看看这个

注意：它在IE中不起作用

对于IE，您可以使用以下JavaScript:
我也在IE中找到了这样做的方法。（使用清除）

html:

参见
参见我的新答案——比这个好得多

如果您处理的是固定宽度的项目，那么这是一个在IE7+中工作的纯css解决方案。例子是。这需要您了解一些有关您正在使用的html的信息（新列的起始位置）。下面是第2列，看它是如何处理的：

HTML

CSS：

ul.parent li {
  float: left;
}

使用jquery：

$('.parent>li:odd').css("clear", "both");

<ul class="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

$（'.parent>li:odd'）.css（“清除”、“两者”）；

一,
二,
三,
四,
五,
六,


请看一看，这在跨浏览器中运行良好，无需JS。您只需限制列的宽度

<style>
    ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;}
    ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;}
</style>

<ul class="col">
    <li>1(li)</li>
    <li>2(li)</li>
    <li>3(li)</li>
    <li>4(li)</li>
    <li>5(li)</li>
</ul>
<ul class="col">
    <li>6(li)</li>
    <li>7(li)</li>
    <li>8(li)</li>
    <li>9(li)</li>
    <li>10(li)</li>
</ul>


ul.col{width:60px；float:left；margin:05px0；padding:0；}
ul.col li{宽度：50px；背景：#999；列表样式类型：无；边距：0 0 5px 0；填充：5px；}

1（李）
2（李）
3（李）
4（李）
5（李）


6（李）
7（李）
8（李）
9（李）
10（李）


如果在页面加载时无法将它们全部放在一个UL中，则可以使用jQuery将它们拆分，以创建相同的结果：

<script>
$(function(){ //on document ready
    var perCol = 5;
    var $ul = $('ul.col');
    var rows = Math.ceil($ul.find('li').length/perCol);
    for(var i=1;i<=rows;i++){
        $ul.after('<ul class="col"></ul>');
    }
    for(var i=1;i<=rows;i++){
        $ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')');
    }
    $ul.remove();
});
</script>


$（函数（）{//已准备好文档
var perCol=5；
var$ul=$（'ul.col'）；
var rows=Math.ceil（$ul.find（'li'）.length/perCol）；
对于（var i=1；i，只要列表项的宽度是固定的，就像您的示例中一样，您就不能在这个提琴中执行类似的操作吗

无论你的列表在什么地方出现，只需将“左”类应用于上半部分，将“右”类应用于下半部分。如果你是通过Javascript动态添加内容，那么每次添加内容时，你只需运行li类，并应用新的正确类

HTML:

下面是一个列生成器，以列数作为参数

调用：$（元素）。列化（3）


在IE6中通过Ubuntu10.04中的wine测试：有效（如果你增加我从@micha借用的样式表的宽度，看起来会更好——谢谢，顺便说一句）

它所做的是首先计算排序器，因为仅使用样式设置这将不起作用。要计算排序器，您需要知道前面的列数。这可以用作除数来引入“clear:left”

此外，使用列表项的数量和列的数量，您需要估计行数。这可以用作除数，根据项目索引和行数之间的余数对项目进行排序

为了使分拣颗粒化，还考虑了原始指标

在放置最后一个原始项之后，列的数量需要减少1。这就是我存储isFinal布尔值的原因。不过，我相信通过一些智能计算，这可以更优雅地完成

然后在正确的位置引入'clear:left'，并将原始位置存储在类中，以便您可以在以后的阶段（例如，在动态插入或删除列表项时）使用

最佳！
新答案与第一个答案完全不同。这假设高度始终为5高（根据anglimas对jblasco解决方案的评论，这是要求）。这里的解决方案是纯css（尽管如果元素数量未知，则需要使用一些javascript）“count”并设置一个名为
first
的类来指示第一行中的元素）

解决方案在IE7+中工作，将容纳任意数量的列

看

HTML


​
你可以试试这个……我还没有用ie测试过

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-3.061616997868383e-16,
            M12=1,
            M21=1,
            M22=3.061616997868383e-16,
            SizingMethod='auto expand');
}
​

@micha-看到我问题的第二张图片，所以我需要这样做。你看到sandeep的答案。我想这样做。@MarcoBox-我想做第一列（1,2,3,4）和第二列（5,6,7,8）…就像我期待的那样，将jQuery更改为$（“.parent:nth child（4n+1）”.css（“clear”，“both”）；我相信你正在寻找这个插件：对不起，斯科特，我想要动态对齐（见我的图片），我不确定你的意思。上面的图片是我匹配的。它可以用javascript动态生成（如果您想动态地执行此操作，那么我只需要使用javascript对元素进行重新排序，并使用普通的
float:left
技术进行显示）。请问，所有这些元素的大小是否相同（如图所示）？它们是否真的是
li
elements都在一个列表中？javascript是一个选项吗？元素/列的数量是否有上限？@Anglimas——请看我的新答案（单独的帖子），我相信现在它符合您的要求。这是一个完全动态的javascript版本，我在其中添加了一个“Add”按钮将另一个li元素插入列表中。做得很好。我喜欢垂直添加1,2,3,4,5，但这里是水平添加4,8。我不确定您的确切意思，您的意思是在第一列中设置最小项数吗？如果是，您可以这样做。只需调整“checkColumns”中的“iMin”变量即可函数。第一组十个数字垂直排列成两行，和我想要的下一组数字一样
$('.parent>li:odd').css("clear", "both");

<ul class="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<style>
    ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;}
    ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;}
</style>

<ul class="col">
    <li>1(li)</li>
    <li>2(li)</li>
    <li>3(li)</li>
    <li>4(li)</li>
    <li>5(li)</li>
</ul>
<ul class="col">
    <li>6(li)</li>
    <li>7(li)</li>
    <li>8(li)</li>
    <li>9(li)</li>
    <li>10(li)</li>
</ul>

<script>
$(function(){ //on document ready
    var perCol = 5;
    var $ul = $('ul.col');
    var rows = Math.ceil($ul.find('li').length/perCol);
    for(var i=1;i<=rows;i++){
        $ul.after('<ul class="col"></ul>');
    }
    for(var i=1;i<=rows;i++){
        $ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')');
    }
    $ul.remove();
});
</script>

<ul>
    <li class="left">1</li>
    <li class="left">2</li>
    <li class="left">3</li>
    <li class="left">4</li>
    <li class="right">5</li>
    <li class="right">6</li>
    <li class="right">7</li>
    <li class="right">8</li>
</ul>

li {
    width: 100px;
}
li.left {
    float: left;
    clear: left;
}
li.right {
    margin-left: 100px;
}

(function($) {
    $.fn.decolumnize = function() {
        this.children().map(function(index, el) {
            var oldPos = null;
            var posClass = null;
            if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) {
                oldPos = parseInt(posClass[0].replace("orig-readorder-", ""));
                $(el).removeClass(posClass[0]);
            }
            return {
                elm: el,
                pos: oldPos ? oldPos : index
            }
        }).sort(function(a,b) {
            return a.pos > b.pos ? 1 : -1;
        }).map(function(index, ob) {
            return ob.elm;
        }).appendTo(this);
        return this.children().css("float", "left").css("clear", "none");
    };
    $.fn.columnize = function(numcols) {
        var numItems = this.children().length;
        var divisor = Math.ceil(numItems / numcols);
        var indexOfFinal = null;       
        this.decolumnize();


        var resorted = this.children().map(function(index, el) {
            return {
                position: (index % divisor) + (index / numItems),
                elm: el,
                isFinal: index == numItems - 1,
                origPos: index
            };
        }).sort(function(a, b) {
            return a.position > b.position ? 1 : -1;
        });
        return resorted.map(function(index, ob) {
            if (indexOfFinal) {
/** TODO: fix redundancy  **/
                if ((index - indexOfFinal - 1) % (numcols - 1) == 0) {
                    if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
                    $(ob.elm).css("clear", "left");
                }
            } else {
/** TODO: fix redundancy **/
                if (index % numcols == 0) {
                    if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
                    $(ob.elm).css("clear", "left");
                }
            }

            if (ob.isFinal) indexOfFinal = index;
            $(ob.elm).addClass("orig-readorder-" + ob.origPos);
            return ob.elm;
        }).appendTo(this);
    };
})(jQuery);

<ul class="MultiColumn">
    <li class="first">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="first">6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

.MultiColumn {
    overflow: auto;
    background-color: yellow;
    padding:0 10px 10px 0;
    float: left;
}

.MultiColumn li {
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 10px 0px 10px 10px ;
    background-color: cyan;
    float: left;
}

.MultiColumn li.first {
    top: 0px;
}

.MultiColumn li.first + li  {
    margin: 40px 0 0 -20px;
}

.MultiColumn li.first + li + li {
    margin: 70px 0 0 -20px;
}

.MultiColumn li.first + li + li + li {
    margin: 100px 0 0 -20px;
}

.MultiColumn li.first + li + li + li + li {
    margin: 130px 0 0 -20px;
}

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-3.061616997868383e-16,
            M12=1,
            M21=1,
            M22=3.061616997868383e-16,
            SizingMethod='auto expand');
}
​