How can I modify this algorithm which reorders a ?

Question

Background:

I asked this question yesterday:

How to modify the orientation of a

spanning multiple columns?

asking how to

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?

Answer 2

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

Answer 3

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.

Answer 4

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;

Answer 5

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.