Question

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

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

反正。

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

我真正需要的是什么

我需要的是一个jQuery插件，它确定每行浮动元素的数量并重新排序，以便它们以上下左下顺序显示。

当浮动元素具有预定义的固定宽度时，这当然可以工作。如果他们不这样做，他们无论如何都不会成为专栏。

问题

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

请注意以备将来参考：我写过这样的jQuery插件，可以找到here

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

重新排序DOM元素

我真正需要的是什么

问题

3 个答案: