Обертывание списков в столбцы

Я использую ColdFusion заполнить шаблон, который включает HTML, незаказанный списки (<ul>s).

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

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

57
задан Jack Bashford 11 July 2019 в 14:02
поделиться

9 ответов

Таким образом, я вскопал эту статью из Списка Независимо CSS Добыча: многостолбцовые Списки . Я закончил тем, что использовал первое решение, это не является лучшим, но другие требуют или использования сложного HTML, который не может быть сгенерирован динамично, или создающий много пользовательских классов, которые могли быть сделаны, но потребуют загрузок встроенного моделирования и возможно огромной страницы.

Другие решения все еще приветствуются все же.

25
ответ дан alexp206 24 November 2019 в 19:41
поделиться

Используя операцию по модулю, можно быстро разделить список на несколько списков путем вставки </ul><ul> во время цикла.

<cfset numberOfColumns = 3 />
<cfset numberOfEntries = 34 />
<ul style="float:left;">
    <cfloop from="1" to="#numberOfEntries#" index="i">
        <li>#i#</li>
            <cfif NOT i MOD ceiling(numberOfEntries / numberOfColumns)>
                </ul>
                <ul style="float:left;">
            </cfif>
    </cfloop>
</ul>

Использование ceiling() вместо round(), чтобы гарантировать, чтобы у Вас не было дополнительных значений в конце списка и что последний столбец является самым коротким.

3
ответ дан jonah 24 November 2019 в 19:41
поделиться

Для вывода списка в несколько сгруппированный тег, можно циклично выполниться этим способом.

<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>
2
ответ дан Dan Roberts 24 November 2019 в 19:41
поделиться

Следующий код JavaScript работает только в Spidermonkey и Rhino, и это воздействует на узлы E4X - т.е. это полезно только для серверной стороны JavaScript, но это могло бы дать кому-то начальную точку для того, чтобы сделать версию jQuery. (Это было очень полезно для меня на стороне сервера, но мне не был нужен он на клиенте достаточно плохо для фактического создания его.)

function columns(x,num) {
    num || (num = 2);
    x.normalize();

    var cols, i, j, col, used, left, len, islist;
    used = left = 0;
    cols = <div class={'columns cols'+num}></div>;

    if((left = x.length())==1)
        left = x.children().length();
    else
        islist = true;

    for(i=0; i<num; i++) {
        len = Math.ceil(left/(num-i));
        col = islist ? new XMLList
                     : <{x.name()}></{x.name()}>;

        if(!islist && x['@class'].toString())
            col['@class'] = x['@class'];

        for(j=used; j<len+used; j++)
            islist ? (col += x[j].copy()) 
                   : (col.appendChild(x.child(j).copy()));

        used += len;
        left -= len;
        cols.appendChild(<div class={'column'+(i==(num-1) ? 'collast' : '')}>{col}</div>);
    }
    return cols;
}

Вы называете его как columns(listNode,2) для двух столбцов, и это поворачивается:

<ul class="foo">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

в:

<div class="columns cols2">
  <div class="column">
    <ul class="foo">
      <li>a</li>
      <li>b</li>
    </ul>
  </div>
  <div class="column collast">
    <ul class="foo">
      <li>c</li>
    </ul>
  </div>
</div>

Это предназначено, чтобы использоваться с CSS как это:

div.columns {
    overflow: hidden;
    _zoom: 1;
}

div.columns div.column {
    float: left;
}

div.cols2 div.column {
    width: 47.2%;
    padding: 0 5% 0 0;
}

div.cols3 div.column {
    width: 29.8%;
    padding: 0 5% 0 0;
}

div.cols4 div.column {
    width: 21.1%;
    padding: 0 5% 0 0;
}

div.cols5 div.column {
    width: 15.9%;
    padding: 0 5% 0 0;
}

div.columns div.collast {
    padding: 0;
}
4
ответ дан Linus Caldwell 24 November 2019 в 19:41
поделиться

Я сделал это с jQuery - это является межплатформенным и минимум кода.

Выбор UL, клонируйте его и вставьте его после предыдущего UL. Что-то как:

$("ul#listname").clone().attr("id","listname2").after()

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

Тогда можно удалить ровные объекты из левого списка и нечетные объекты из правого списка.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

Теперь у Вас есть левое для исправления двух списков столбцов.

, Чтобы сделать больше столбцов Вы захотите использовать .slice(begin,end) и/или :nth-child селектор. т.е., для 21 ЛИТИЯ Вы могли .slice(8,14), чтобы создать новый UL, вставленный после Вашего исходного UL, затем выбрать исходный UL и удалить литий, выбрал с ul :gt(8).

Попытка Bibeault/Katz заказывают на jQuery, это - большой ресурс.

5
ответ дан ScottyDont 24 November 2019 в 19:41
поделиться

Нет никакого чистого CSS/HTML способа достигнуть этого, насколько я знаю. Ваш лучший выбор состоял бы в том, чтобы сделать это в предварительной обработке (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

другая опция, с помощью JavaScript (я не знаком с библиотека jQuery конкретно) состояла бы в том, чтобы выполнить итерации через списки, вероятно, на основе их являющийся определенным классом, считать число детей, и если это - достаточно высокое количество, динамично создайте новый список после первого, передав некоторое количество элементов списка к новому списку. До реализации столбцов Вы могли, вероятно, пустить в ход их оставленный, сопровождаемый элементом, который имел стиль clear: left или clear: both.

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}
<ul class="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 49</li>
  <li>Item 50</li>
</ul>
<ul class="column">
  <li>Item 51</li>
  <li>Item 52</li>
  <!-- ... -->
  <li>Item 99</li>
  <li>Item 100</li>
</ul>
<div class="clear">
11
ответ дан Peter B 24 November 2019 в 19:41
поделиться

Если поддержка Safari и Firefox достаточно хороша для Вас, существует решение для CSS:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

я не уверен в Opera.

16
ответ дан Nhan 24 November 2019 в 19:41
поделиться

Вещь, которую забывает большинство людей, состоит в том, что при плавании <li/> объекты, все объекты должны быть той же высотой, или столбцы начинают добираться в неисправном состоянии.

, Так как Вы используете серверный язык, моя рекомендация состояла бы в том, чтобы использовать CF для разделения списка на 3 массива. Тогда можно использовать внешнее ul для обертывания 3, внутренних ul как так:

<cfset thelist = "1,2,3,4,5,6,7,8,9,10,11,12,13">  
<cfset container = []>  
<cfset container[1] = []>  
<cfset container[2] = []>  
<cfset container[3] = []>  

<cfloop list="#thelist#" index="i">  
    <cfif i mod 3 eq 0>  
        <cfset arrayappend(container[3], i)>  
    <cfelseif i mod 2 eq 0>  
        <cfset arrayappend(container[2], i)>  
    <cfelse>  
        <cfset arrayappend(container[1], i)>  
    </cfif>  
</cfloop>  

<style type="text/css"> 
    ul li { float: left; }  
    ul li ul li { clear: left; }  
</style>  

<cfoutput>  
<ul>  
    <cfloop from="1" to="3" index="a">  
    <li>  
        <ul>  
            <cfloop array="#container[a]#" index="i">  
            <li>#i#</li>  
            </cfloop>  
        </ul>  
    </li>  
    </cfloop>  
</ul>  
</cfoutput>
4
ответ дан Leigh 24 November 2019 в 19:41
поделиться

Вот вариант примера Thumbkin (с использованием JQuery):

var $cat_list = $('ul#catList'); // UL with all list items.
var $cat_flow = $('div#catFlow'); // Target div.
var $cat_list_clone = $cat_list.clone(); // Clone the list.
$('li:odd', $cat_list).remove(); // Remove odd list items.
$('li:even', $cat_list_clone).remove(); // Remove even list items.
$cat_flow.append($cat_list_clone); // Append the duplicate to the target div.

Спасибо Thumbkin!

4
ответ дан 24 November 2019 в 19:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: