javascript - 重新排序 DOM 元素

Question

我有预定义宽度的 CSS float 元素，我希望它们从行转置到列。实际上重新排序它们看起来好像它们是按列而不是按行排序的，这通常是 float 元素...

因此，将元素放入列中的最简单方法是对它们使用 float: left;。问题是我们从从左到右和从上到下而不是从上到下和从左到右(正如我们在电话簿中看到的那样，例如使用列和数据在列而不是行中流动)。当元素按字母顺序排列时，后者更容易搜索，因为跟随列比跟随行更容易。

无论如何。

我知道我可以使用按上-下-左-右顺序列出元素的 CSS3 列，但问题是 IE 仍然 甚至在 IE9 中也不支持它们。

我真正需要的

我需要的是一个 jQuery 插件，它可以确定每行 float 元素的数量并对它们重新排序，以便它们以上-下-左-右的顺序出现。

这当然只有在 float 元素具有预定义的固定宽度时才有效。如果他们不这样做，他们无论如何都不会显示为列。

问题

是否有此功能的插件，这样我就不必自己编写？因为否则我显然必须这样做。

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

Answer 1

不知道是否有插件，但在这里(伴随 fiddle :http://jsfiddle.net/58akv/1/):

jQuery:

    // This is me being lazy and not wanting to copy/paste box 50 times
    var box = $('div.box');
    for (var i = 1; i < 50; i++) {
        box.clone().text(i).appendTo(box.parent());
    }
    // Now that we have all elements
    var i = 0;
    // Specify how many you'd like per row, if you want to
    var rowsPerColumn = 0;
    var cols = 0;
    $('.box').each(function() {
        // remove float
        $(this).css("float", "none");

        if ($(this).parent('.col').length == 0) {
            // if rowsPerColumn is 0 or undefined, figure it out ourselves
            if (rowsPerColumn == 0 || !rowsPerColumn) {
                // calculate how many fit into given width
                var totalColumns = Math.floor($("#wrapper")[0].clientWidth / $(this).outerWidth(true));
                // calculate how many boxes go into each column
                rowsPerColumn = Math.ceil($('.box', '#wrapper').length / totalColumns);
            }
            // wrap this and next in col
            var parent = $(this).parent();
            var els = $(this).add($(this).siblings('.box').slice(0, rowsPerColumn-1));
            parent.append($('<div></div>').addClass('col').append(els).attr('id', 'col'+ (++cols).toString()))
        }
    });

CSS(用于示例目的):

.box {
    background-color: #333;
    width: 90px;
    height: 90px;
    margin: 5px;
    color: #eee;
    font-size: 2em;
    float: left;
}

.col { float: left; }

HTML(用于示例目的):

<div id="wrapper">
    <div class="box">0</div>
</div>