Javascript, чтобы превратить неупорядоченный список в несколько столбцов

Question

Кажется, что в (хорошо поддерживаемом) CSS нет простого способа сделать это. Я ищу решение javascript, предпочтительно jQuery.

У меня есть неупорядоченный список, подобный этому:

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>        
    ...etc
</ul>

Я хочу, чтобы каждый столбец имел высоту, например, четыре элемента и заполнял, а не горизонтально, как плавающий css:

A     E
B     F
C
D

Answer 1

Вы захотите использовать комбинацию CSS и jQuery, но в теории это очень просто.Визуализируйте полный список в HTML, затем предоставьте обертку через jQuery и разбейте список по желанию.Следующая функция делает именно это.Обязательно используйте более конкретный селектор, чем просто ul при фактическом использовании скрипта.id было бы идеально.

Посмотреть демо здесь.

jQuery(function ($) {
  var size = 4,
      $ul  = $("ul"),
      $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
      loop = Math.ceil($lis.length / size),
      i    = 0;

  $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

  for (; i < loop; i = i + 1) {
    $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + size)).insertAfter($ul);
  }
});

Answer 2

См. Эту статью:

Одним из второстепенных святых Граалей XHTML и CSS является создание единого семантически логичного упорядоченного списка, который оборачивается в вертикальные столбцы.

I 'предупрежу вас заранее.Если вы хотите представить список в несколько столбцов, вам придется пойти на компромисс.Вы можете пожертвовать веб-стандартами W3C и использовать устаревшую разметку, вы можете жить с разметкой, которая менее семантически логична, вы можете допустить смешивание презентации с контентом, вы можете попрощаться с совместимостью с браузером, или вы можете использовать разметку, которая тяжела с атрибутами истиль это тяжело с правилами.Каждая дорога требует платы.

http://www.alistapart.com/articles/multicolumnlists/

«Лучшее» решение субъективно, но я бы склонялся к произвольным классам.

Answer 3

для этого я использую плагин "Easy List Splitter". вот ссылка:

http://www.madeincima.it/en/articles/resources-and-tools/easy-list-splitter-plugin/

Answer 4

@ Кейо, спасибо за полезный ответ.

Всего несколько модификаций, необходимых для того, чтобы это работало на моем конце.
(Формула была изменена, возможно, она может кому-то помочь)

var col_max_item = 2; //Max Items per column
var col_width = $('.header ul li').css('width').replace("px", "");  //Pixels, get width from CSS
var col_height = $('.header ul li').css('height').replace("px", ""); //Pixels, get height from CSS  

    $('.header ul').each(function() { 
        $(this).find('li').each(function(index){ 
            column = parseInt(index/col_max_item);
            $(this).css('margin-left', column * col_width + 'px')
            if(column > 0 && (index / col_max_item) == column) {
                $(this).css('margin-top', (col_max_item * col_height * -1)  + 'px').addClass('col_'+column);
            }
        });
    });

Answer 5

Решение Дуга хорошо, если вы хотите разделить список на подсписки.

Вместо этого я решил расположить элементы списка, не меняя дом. Это немного запутанно, в основном это ставит левое поле для каждого элемента, который является номером столбца, умноженным на ширину столбца. Это приведет к расположению лестницы, поэтому следующим шагом было добавление некоторого отрицательного верхнего поля, чтобы поднять каждый элемент вверх.

В основном это отображается в виде сетки. Я использую это для выпадающих меню, чтобы оно работало хорошо. Избегайте использования этого, если вам нужно, чтобы каждый элемент списка имел динамическую высоту. Переменная col_height может быть установлена ​​на высоту самого большого элемента, чтобы сделать код немного более универсальным.

var col_max_height = 6; //Max Items per column
var col_width = 200; //Pixels
var col_height = 33; //Pixels
$('.header ul li ul').each(function() {
    $(this).find('li').each(function(index){
        column = parseInt(index/col_max_height);
        $(this).css('margin-left', column * col_width + 'px')
        if(column > 0) {
            $(this).css('margin-top', (index - (col_max_height * column)  + 1) * -col_height + 'px').addClass('col_'+column);
        }
    });
});

Answer 6

Просто немного по-другому движется вверх по следующему столбцу вместо каждого li.

var col_max_height = 6; //Max Items per column
var col_width = 120; //Pixels
var prevCol = 0; 
$('.header ul').each(function() {
    $(this).find('li').each(function(index){
    column = parseInt(index/col_max_height);
    $(this).css('margin-left', column * col_width + 'px')
        if(prevCol != column) {
            $(this).css('margin-top',  '-92px').addClass('col_'+column);
            prevCol = column;
        } else {
            $(this).css('margin-top',  '0px').addClass('col_'+column);
        }
    });
});

Answer 7

Вы можете действительно легко сделать это с помощью jQuery-Columns Plugin , например, чтобы разделить ul с классом .mylist, который вы бы сделали

$('.mylist').cols(2);

Вот живой пример на jsfiddle