Question

I have CSS floated elements with predefined width and I want them to transpose from rows to columns. Actually reordering them to look as if they were ordered by columns instead of rows as is usual with floated elements…

So the easiest way to put elements in columns is to use float: left; on them. The problem is that we get ordering from left to right & top to bottom instead of top to bottom & left to right (as we can see in phone books for instance that use columns and data flows in columns not rows). The latter is much easily searchable when elements are ordered alphabetically because it’s easier to follow columns than rows.

Anyway.

I know I could use CSS3 columns which list elements in the top-bottom-left-right order, but the problem is that IE still doesn’t support them even in IE9.

What I actually need

What I need is a jQuery plugin that determines the number of floated elements per row and reorder them, so that they appear in the top-bottom-left-right order.

This can only work of course when floated elements have a predefined fixed width. If they don’t they don’t appear being columns anyway.

Question

Is there a plugin for this functionality so I don’t have to write my own? Because otherwise I will obviously have to.

Note for future reference: I’ve written such jQuery plugin which can be found here

Answer 1

Funny, because I literally JUST coded something like this for a project. I had a UL with a list of items in alphabetical order, but the ordering went from left to right instead of top/down per column.

The following script reorders the LIs accordingly:

var $lists = $('ul.list');
var columnCount = 3;

// reorder the ul so that the columns are left to right and still alphabetized
$lists.each(function() {
    var $ul = $(this);
    var $newList = $('<ul class="list" />');
    var $lis = $ul.children('li');
    var itemCount = $lis.size();
    var leftovers = itemCount % columnCount;
    var itemsPerColumn = [];

    for (var i = 0; i < columnCount; i++){
      itemsPerColumn[i] = Math.floor(itemCount / columnCount) + (i < leftovers ? 1 : 0);
    }

    var offsetIndex = 0;
    var rowIndex = 0;

    $lis.each(function(i){
      var $li = $(this);
      var columnIndex = i % columnCount;
      $lis.eq(offsetIndex).clone().appendTo($newList)
      offsetIndex += itemsPerColumn[columnIndex];

      if (offsetIndex >= itemCount) offsetIndex = ++rowIndex;
    });

    $ul.replaceWith($newList);
});