多列列表jquery

Question

我有一个列表，其中包含未知数量的项目。 有没有办法使用 jquery 或 javascript 将列表拆分为列？ 棘手的部分：列数也是动态的，因此当浏览器更改它时，列数会更改为。 您可以将其与浮点数进行比较。所以当你让你的浏览器变小时，浮动的 div 将浮动做底部。 （如果你没有设置宽度） 我可以说计算项目的数量并将它们放在列中，然后浮动 ul 列表。但是你有一个问题，最后一列将放在第一列之下。但我想要第一列下的“第二”列。

例如：

<ul>
   <li>test1</li>
   <li>test2</li>
   <li>test2</li>
   <li>test4</li>
   <li>test5</li>
   <li>test6</li>
</ul>

如果我做一个浮动，你会得到这个：

test1 test2 test3 test4 test5 test6

当浏览器变小时，您会看到： 测试1 测试2 测试3 测试4 测试5 测试6

它应该是：
测试1 测试3 测试4 测试5 测试6 测试2

（这是当你使用浮动时）所以有没有办法改变浮动顺序，或者只是用 jquery 来动态地制作列？

---

我找到了这个解决方案，但它仍然无法像我想要的那样工作。它是 jquery 插件：columnizeList。该列表显示在几列中，但我仍然有这个问题： 当我加载页面时，例如我的 div 中有这个列表：

（所以这和以前的问题一样）。我仍然使用浮动，所以也许这就是问题所在。但是我可以在没有浮动的情况下解决这个问题吗？

Answer 1

这就是浮动的工作原理，如果您希望项目显示在彼此下方，您可以包装其中一些，然后浮动它们的包装器：

<ul>
   <div>
     <li>test1</li>
     <li>test2</li>
     <li>test2</li>
     <li>test4</li>
     <li>test5</li>
   </div>
   <div>
     <li>test6</li>         
     <li>test7</li>         
     <li>test8</li>
   </div>
</ul>


ul div {
   float: left
}

http://jsfiddle.net/f8Kgj/