Multi column list jquery

Question

I have a list with an unknown amount of items. Is there a way with jquery or javascript so the list will be split into columns? the tricky part: the count of columns is also dynamic, so when the browser changes it's with, the count of columns changes to. You could compare it with floats. So when you make your browser smaller, the floated div will float do the bottum. (if you haven't set a width) I could have said counted the amount of items and placed them in columns and then float the ul lists. But than you have the problem that it the last column will be placed under the first one. but I would want the "second" column under the first.

for example:

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

If I do a float you will have this:

test1 test2 test3 test4 test5 test6

When the browser gets smaller you have this: test1 test2 test3 test4 test5 test6

and it should be:
test1 test3 test4 test5 test6 test2

(this is when you work with floats) so is there a way to change the floating order, or just with jquery to make the columns dynamically?

I found this solution, but It's still won't work like I want to. It's the jquery plugin: columnizeList. The list is shown in a few columns but I still have this problem: When I load the page I have for example this list in my div:

enter image description here

(so It's the same problem as before). I still used float, so maybe that's the problem. But could I solve this without the float?

Thanks for looking in to this. I also found the website you mentioned, but here I have the same problem. First with the floating, the items are shown next to each other instead of below each other. than you have the choice to use a specific amount of columns. But here that's the problem. So the amount of columns should change with the browser width. — user993177

undefined undefined · Accepted Answer · 2012-06-18T09:43:47

that's how floating works, if you want items to be shown below each other, you can wrap some of them and then float their wrapper:

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

Multi column list jquery

2 Answers