多列列表jquery

我有一张物品数量未知的清单。 有没有办法使用jquery或javascript将列表拆分为列？ 棘手的部分是：列的计数也是动态的，所以当浏览器改变它时，列的计数会改变为。 你可以将它与浮动进行比较。因此，当您使浏览器变小时，浮动的div将执行浮动操作。如果您没有设置宽度 我可以说，数一数物品的数量，把它们放在列中，然后浮动ul清单。但是你有一个问题，那就是最后一列会被放在第一列下面。但我希望第二列在第一列下面

例如：

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

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

测试1测试2测试3测试4测试5测试6

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

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

这是当您使用浮动时，那么是否有方法更改浮动顺序，或者仅使用jquery动态生成列

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

---

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

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

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

我建议您使用CSS:display:flex并使用它。您还可以利用来简化更改

关于flex最好的一点是，您可以简单地在样式表中按类型order:1对元素进行重新排序，如果您使用Bootstrap，您可以简单地在第一个元素上放置.order-1类

---

您还可以使用.order-lg-1类，使用引导程序根据屏幕宽度重新订购。

感谢您查看此内容。我也发现了你提到的网站，但在这里我有同样的问题。首先，使用浮动，项目显示在彼此旁边，而不是彼此下方。您可以选择使用特定数量的列。但这就是问题所在。因此，列的数量应该随着浏览器的宽度而变化。这里，您也有同样的浮动问题。例如，如果您有另一个test9test10，那么这些将被放置在test1、test2、test3，。。。而不是test6，它应该位于test5之下，test9应该显示为test1的嵌套。所以，因为我认为浮动不是最好的解决方案，所以我希望jquery会是答案。但我也没有解决办法。