Изменение порядка элементов 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

Вот плагин; попробовал, отлично работает! https://github.com/litera/jquery-transpose

Answer 3

Забавно, потому что я буквально ПРОСТО кодировал что-то подобное для проекта.У меня был 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);
});