How can I modify this algorithm which reorders a
?

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?

score 5 · Accepted Answer · edited May 23 '17 at 11:55

5

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?

edited May 23 '17 at 11:55

Community

1
1

answered Jun 03 '11 at 10:45

thirtydot

224,678
48
389
349

I saw your solution yesterday, and I thought it was good, but you stated "Well, you can if you don't care about IE".. the thing is, I do have to cater for IE so I assumed that this wouldn't be a runner. *However*, I just loaded this in IE8, IE7 & Quirks Mode and it's working perfectly! Do you mean IE6? Unfortunately I don't have a copy of IE6 (never thought I'd ever say that!), so I can't test it in that. What is the effect in IE6? – DaveDev Jun 03 '11 at 10:51
The "if you don't care about IE" was just for CSS3 columns, see: http://caniuse.com/#search=multiple%20column. CSS3 columns would have been the *perfect* solution, but that darned IE.. The jQuery will work in all browsers. (I just checked IE6, and it also seems to work there). – thirtydot Jun 03 '11 at 10:53
Dude, in my opinion you're the king of the world today. This is excellent. – DaveDev Jun 03 '11 at 11:20

Robert Koritnik · Answer 2 · 2011-08-03T10:03:31.683

jQuery plugin `.transpose()`

Exactly what you want it to do. I needed the same thing so I've written a general jQuery plugin that transposes any floated or inline-blocked elements that seem to be in columns but their order goes in rows.

Check out my detailed blog post with an example for transposing US states, and then head over to GitHub where the plugin is maintained and you can get a minified version (915 bytes as of version 1.2) of it as well.

All you need to do is:

$("yourSelector").transpose();

In your case that would be

$("li").transpose();

The good thing is that plugin checks how many columns are there originally (before transposition) and transposes to the same amount of columns afterwards. It doesn't add any additional HTML elements into DOM (like floated column wrappers or similar) it just rearranges existing elements. This is very good when it comes to CSS settings of the page because it doesn't interfere with them in any way shape or form.

And it also distinguishes between different lists of elements (items that are contained within different containers) as if you'd have two UL elements that need transposition. You don't have to call .transpose() on each because plugin will do that for you. You'd still just use the same selector as previously written.

Thanks for this. Looks really good. I've already implemented the other solution, but I'll definitely keep this in mind if I have to do something similar again. — DaveDev, Aug 03 '11 at 09:54

Farshid Zaker · Answer 3 · 2011-06-03T11:10:30.480

What about this code:

jsfiddle

// I add a number of new elements to the <ul>, in this case, 'm', 'n', 'o' &'p'

var rowcount = 6; // I increase rowcount from 4 to 6 to accommodate the new elements
var colcount = 3;
var ichild=$('.directory-result-list-bottom').children();
var wf= "<li class='directory-result-text'>";
var wb= "</li>"
var k="";
var u;
var v;
var carryover=0;

$('.directory-result-list-bottom').empty();

for(var i = 0; i<rowcount; i++){
    carryover=0;
    for(var j=0; j<colcount; j ++){
        k=k+wf+(ichild[(j*rowcount)+i].innerHTML)+wb;
    }  
}    
document.getElementById('place').innerHTML=k;

score 0 · Answer 4 · answered Jun 03 '11 at 11:37

I believe empty LI's are needed to fill the empty space.

This should work:

for(var i = 0; i<rowcount; i++){
    for(var j=0; j<colcount; j ++){
        var n = (j*rowcount)+i;
        if (ichild[n]) 
            k=k+wf+(ichild[n].innerHTML)+wb;
        else
           k = k + wf + wb
    }  
}

score 0 · Answer 5 · answered Jun 06 '11 at 04:51

I think it's simpler to represent the items as a 1-D list (a,b,c...) and think about how to 1) get that from the original array and 2) transform it into the output array.

Step 1 is easy, because the 1-D list is the same order as the <li> elements in the HTML source.

So, suppose we have n elements and we want to put them into R rows and C columns but filling columns first. The element that goes in position (r,c) (0 based) is just element #R*c + r. And, as stated before, the order in the source file is the row-first order, or (0,0), (0,1), (0,2), ...

If the # of elements doesn't fill the RxC grid exactly, then you have to add checks that the computed element number doesn't exceed n (easiest way is to pad the list with empty elements beforehand).

Depending on the design requirements, you can also adapt this to minimize the number of blank elements given a fixed number of rows or columns.

How can I modify this algorithm which reorders a
?

5 Answers5

jQuery plugin `.transpose()`

Linked

How can I modify this algorithm which reorders a ?

5 Answers5

jQuery plugin .transpose()

Linked

How can I modify this algorithm which reorders a
?

jQuery plugin `.transpose()`