多列列表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

当浏览器变小时，你有这个： test1 test2 test3 test4 test5 TEST6

应该是：
test1 test3 test4 test5 test6 TEST2

（这是你使用浮点数的时候）所以有没有办法改变浮动顺序，或者只是用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/

Answer 2

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

关于flex的最好的事情是你可以简单地通过样式表中的order: 1类型重新排序元素，如果使用Bootstrap，你可以简单地将.order-1类放在第一个元素上

您还可以使用.order-lg-1类使用Bootstrap根据屏幕宽度重新排序。