Question

Background:

I asked this question yesterday:

How to modify the orientation of a <ul> spanning multiple columns?

asking how to convert a list like this:

a  b  c

d  e  f

g  h  i

j  k  l

into a list like this:

a  e  i

b  f  j

c  g  k

d  h  l

and I got this awesome response by beeflavor: http://jsfiddle.net/H4FPw/12/

Problem:

Unfortunately I didn’t specify that there could be any number of list items, so his response is hard-coded to 4 rows, and uses a tricky matrices algorithm (read: black magic) that I can’t wrap my head around.

I’m poking and prodding at this, trying to add variability but unfortunately it’s not coming together for me and today’s the deadline for this stuff.

This is an updated example of the problem I’m having: http://jsfiddle.net/H4FPw/13/

Is there anyone out there with a better head for this stuff who can give me a steer in the right direction?

Answer 1

I know it’s not as “elegant” as your accepted answer in that question, but the code I linked to in my answer yesterday does work perfectly for you:

http://jsfiddle.net/AcdcD/

If you don’t need to handle resizing, it can be simplified slightly:

http://jsfiddle.net/AcdcD/1/

Maybe you can use this if you run out of time?