Упаковка списков в столбцы - PullRequest
Новая
       117

Упаковка списков в столбцы

51 голосов
/ 07 августа 2008

Я использую ColdFusion для заполнения шаблона, включающего HTML списки (<ul>).

Большинство из них не такие длинные, но некоторые имеют смехотворно большую длину и могут стоять в 2-3 столбца.

Есть ли HTML, ColdFusion или, возможно, JavaScript (у меня есть jQuery`) способ сделать это легко? Это не стоит слишком сложного и тяжеловесного решения, чтобы сэкономить на прокрутке.

Ответы [ 13 ]

2 голосов
/ 15 сентября 2008

Чтобы вывести список в несколько сгруппированных тегов, вы можете выполнить цикл таким образом. 

<cfset list="1,2,3,4,5,6,7,8,9,10,11,12,13,14">
<cfset numberOfColumns = "3">

<cfoutput>
<cfloop from="1" to="#numberOfColumns#" index="col">
  <ul>
  <cfloop from="#col#" to="#listLen(list)#" index="i" step="#numberOfColumns#">
    <li>#listGetAt(list,i)#</li>
  </cfloop>
  </ul>
</cfloop>
</cfoutput>
1 голос
/ 27 августа 2015

Вы можете попробовать это преобразовать в столбцы.

CSS: 

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

Часть HTML: 

<ul class="col">
    <li>Number 1</li>
    <li>Number 2</li>

    <li>Number 19</li>
    <li>Number 20</li>
</ul>
<ul class="col">
    <li>Number 21</li>
    <li>Number 22</li>

    <li>Number 39</li>
    <li>Number 40</li>
</ul>

1 голос
/ 01 июля 2013

Поскольку у меня была та же проблема, и я не мог найти ничего «чистого», я подумал, что выложил свое решение В этом примере я использую обратный цикл while, поэтому я могу использовать splice вместо slice. Преимущество теперь в том, что splice () нужен только индекс и диапазон, где slice () нужен индекс и общее количество. Последний имеет тенденцию становиться трудным, зацикливаясь.

Недостатком является то, что мне нужно перевернуть стек при добавлении.

Пример:

кол = 4; liCount = 35

для цикла со срезом = [0, 9]; [9, 18]; [18, 27]; [27, 35]

в обратном направлении при соединении = [27, 8]; [18, 9]; [9, 9]; [0, 9]

Код: 

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}
Страница:
...