0

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

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

反正。

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

我真正需要的

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

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

问题

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

供将来参考的注意事项：我已经编写了这样的 jQuery 插件，可以在这里找到

4

3 回答 3

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>
于 2011-07-28T14:15:33.373 回答
0

有趣，因为我只是为一个项目编写了这样的代码。我有一个 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);
});
于 2011-07-28T16:48:49.840 回答
0

这是插件；试过了，效果很好！ https://github.com/litera/jquery-transpose

于 2012-02-16T22:21:28.897 回答