Question

I generated a list of <UL><LI>‘s in PHP. The script generates this from top to bottom:

<ul class="list_test">
<li>111
</li>
<li>222
</li>
<li>333
</li>
<li>444
</li>
<li>555
</li>
<li>666
</li>
<li>777
</li>
<li>888
</li>
<li>999
</li>
<li>1010
</li>
</ul>

Right now they are rendered like this:

111
222
333
444
555
666
777
888
999
1010

How can I combine these in groups?

Let’s say, I would like for example for them to be rendered as:

111 555 999
222 666 1010
333 777 etc
444 888

How can I do this?

I would like to use only Javascript and not modify the PHP. I thought about adding a div for example, 100 px high, that would wrap on the right…

jsfiddle: http://jsfiddle.net/hf2PL/

Answer 1

I’ve mocked up a solution here: http://jsfiddle.net/eqvc4/

It uses absolute positioning to re-arrange the <li> elements into columns.
The JavaScript code is as follows:

var $ul = $('ul'),
    $li = $ul.children(),
    cols = 3,
    rows = Math.ceil($li.length / cols),
    height = rows * 1.2,
    width = cols * 5;

$ul.css({ height: height+'em', width: width+'em' });
$li.each(function(index) {
    var col = Math.floor(index / rows),
        row = index % rows,
        left = col * 5,
        top = row * 1.2;

    $(this).css({ left: left+'em', top: top+'em' });
});

It also requires the following CSS:

ul {
    position: relative
}

li {
    width: 5em;
    height: 1.2em;
    position: absolute;
}