HTMLの順序付けされていないリスト（ s）ColdFusionを含むテンプレートにデータを入力するために使用しています。<ul>
これらのほとんどはそれほど長くはありませんが、いくつかは途方もなく長い長さを持ち、2〜3列で実際に立つことができます。
これを簡単に行うためのHTML、ColdFusion、またはおそらくJavaScript（jQueryソリューションを受け入れています）の方法はありますか？スクロールを節約するために、複雑すぎるヘビーウェイトソリューションを使用する価値はありません。
そこで、この記事をA List Apart CSS Swag：Multi-ColumnListsから掘り下げました。私は最初のソリューションを使用することになりましたが、それは最善ではありませんが、他のソリューションでは、動的に生成できない複雑なHTMLを使用するか、多くのカスタムクラスを作成する必要があります。おそらく巨大なページ。
ただし、他のソリューションも引き続き歓迎します。
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についてはわかりません。
私の知る限り、これを実現するための純粋なCSS/HTMLの方法はありません。あなたの最善の策は、前処理（if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1）でそれを行うことです。
JavaScriptを使用するもう1つのオプション（特に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">私はこれを jQuery で行いました。これはクロスプラットフォームであり、最小限のコードです。
UL を選択して複製し、前の UL の後に挿入します。何かのようなもの：
$("ul#listname").clone().attr("id","listname2").after()
これにより、前のリストの後にリストのコピーが挿入されます。元のリストが float:left でスタイル設定されている場合、それらは並べて表示されます。
次に、左側のリストから偶数項目を削除し、右側のリストから奇数項目を削除できます。
$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();
これで、左から右への 2 列のリストができました。
より多くの列を実行するには.slice(begin,end)、および/または:nth-childセレクターを使用します。つまり、21 個の LI の場合.slice(8,14)、元の UL の後に挿入された新しい UL を作成し、元の UL を選択して で選択した li を削除できますul :gt(8)。
jQuery に関する Bibeault/Katz book を試してみてください。すばらしいリソースです。
ほとんどの人が忘れていることは、<li/>アイテムをフローティングする場合、すべてのアイテムが同じ高さでなければならないということです。
サーバー側の言語を使用しているため、CF を使用してリストを 3 つの配列に分割することをお勧めします。次に、外側を使用して 3 つの内側を次のようulにラップできます。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.
ありがとうサムキン！
次の 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)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;
}
</ul><ul>モジュロ演算を使用すると、ループ中に duringを挿入することで、リストを複数のリストにすばやく分割できます。
<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()
フレックスボックスを使用して、行方向と列方向の両方でアイテムをラップできます。
主なアイデアはflex-direction、コンテナの を または のいずれかにrow設定することcolumnです。
注意: 現在、ブラウザのサポートはかなり充実しています。
(サンプル マークアップは、この古い「リスト アパート」記事から抜粋)
ol {
display: flex;
flex-flow: column wrap; /* flex-direction: column */
height: 100px; /* need to specify height :-( */
}
ol ~ ol {
flex-flow: row wrap; /* flex-direction: row */
max-height: auto; /* override max-height of the column direction */
}
li {
width: 150px;
}
a {
display: inline-block;
padding-right: 35px;
}<p>items in column direction</p>
<ol>
<li><a href="#">Aloe</a>
</li>
<li><a href="#">Bergamot</a>
</li>
<li><a href="#">Calendula</a>
</li>
<li><a href="#">Damiana</a>
</li>
<li><a href="#">Elderflower</a>
</li>
<li><a href="#">Feverfew</a>
</li>
<li><a href="#">Ginger</a>
</li>
<li><a href="#">Hops</a>
</li>
<li><a href="#">Iris</a>
</li>
<li><a href="#">Juniper</a>
</li>
<li><a href="#">Kava kava</a>
</li>
<li><a href="#">Lavender</a>
</li>
<li><a href="#">Marjoram</a>
</li>
<li><a href="#">Nutmeg</a>
</li>
<li><a href="#">Oregano</a>
</li>
<li><a href="#">Pennyroyal</a>
</li>
</ol>
<hr/>
<p>items in row direction</p>
<ol>
<li><a href="#">Aloe</a>
</li>
<li><a href="#">Bergamot</a>
</li>
<li><a href="#">Calendula</a>
</li>
<li><a href="#">Damiana</a>
</li>
<li><a href="#">Elderflower</a>
</li>
<li><a href="#">Feverfew</a>
</li>
<li><a href="#">Ginger</a>
</li>
<li><a href="#">Hops</a>
</li>
<li><a href="#">Iris</a>
</li>
<li><a href="#">Juniper</a>
</li>
<li><a href="#">Kava kava</a>
</li>
<li><a href="#">Lavender</a>
</li>
<li><a href="#">Marjoram</a>
</li>
<li><a href="#">Nutmeg</a>
</li>
<li><a href="#">Oregano</a>
</li>
<li><a href="#">Pennyroyal</a>
</li>
</ol>次のスタイルの列付きリストを可能にする別のソリューションを次に示します。
1. 4. 7. 10.
2. 5. 8. 11.
3. 6. 9. 12.
(ただし、これは純粋な JavaScript であり、jQuery が必要であり、フォールバックはありません)
以下には、Array プロトタイプを変更して、任意の Array を所定のサイズのチャンクに分割する「chunk」と呼ばれる新しい関数を提供するコードが含まれています。次は「buildColumns」と呼ばれる関数で、UL セレクター文字列と、列に含めることができる行数を指定するために使用される数値を取ります。(これは動作中の JSFiddle です)
$(document).ready(function(){
Array.prototype.chunk = function(chunk_size){
var array = this,
new_array = [],
chunk_size = chunk_size,
i,
length;
for(i = 0, length = array.length; i < length; i += chunk_size){
new_array.push(array.slice(i, i + chunk_size));
}
return new_array;
}
function buildColumns(list, row_limit) {
var list_items = $(list).find('li').map(function(){return this;}).get(),
row_limit = row_limit,
columnized_list_items = list_items.chunk(row_limit);
$(columnized_list_items).each(function(i){
if (i != 0){
var item_width = $(this).outerWidth(),
item_height = $(this).outerHeight(),
top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));
$(this[0]).css('margin-top', top_margin);
$(this).css('margin-left', left_margin);
}
});
}
buildColumns('ul#some_list', 5);
});
リストを複数のグループ化されたタグに出力するには、この方法でループできます。
<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>
これを試して、列に変換できます。
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>