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

Используя операцию по модулю, можно быстро разделить список на несколько списков путем вставки </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(), чтобы гарантировать, чтобы у Вас не было дополнительных значений в конце списка и что последний столбец является самым коротким.

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

<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>

Следующий код 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;
}

Я сделал это с 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, это - большой ресурс.

Нет никакого чистого 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">

Если поддержка 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.

Вещь, которую забывает большинство людей, состоит в том, что при плавании <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>

Вот вариант примера 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!