重新排序DOM元素

Question

我有预定义宽度的CSS浮动元素，我希望它们从行转置到列。实际上是将它们重新排序，使它们看起来像按列排序，而不是像浮动元素那样按行排序…

因此，在列中放置元素的最简单方法是对它们使用float: left;。问题是我们从左到右排序&从顶到底代替从顶到底&从左到右(例如，我们可以在电话簿中看到，它使用列和数据流在列而不是行中)。当元素按字母顺序排列时，后者更容易搜索，因为跟踪列比跟踪行更容易。

。

我知道我可以使用CSS3列列表元素在上下左右的顺序，但问题是，IE 仍然不支持他们，即使在IE9。

我真正需要的

我需要的是一个jQuery插件，确定每行浮动元素的数量，并重新排序，使他们出现在上，下，左，右的顺序。

这当然只能在浮动元素具有预定义的固定宽度时起作用。如果没有，它们也不会显示为列。

问题

是否有这个功能的插件，所以我不必写我自己的?因为如果不这样的话，我就不得不。

注:为将来参考:我已经写了这样的jQuery插件，可以在这里找到

Answer 1

不知道是否有插件，但这里你去(伴奏小提琴: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>

Answer 2

有趣，因为我刚刚为一个项目编写了这样的东西。我有一个UL，其中包含按字母顺序排列的项目列表，但顺序是从左到右，而不是每列从上到下。

下面的脚本相应地重新排序li:

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

Answer 3

插件;试过了，效果很好!https://github.com/litera/jquery-transpose