htmlグリッドアイテムを垂直に折り返すように整列する

Question

私は、0から9まで垂直にフローさせ、次に10を次の列に折り返す必要がある生成されたdivのグリッドを持っています。現在の構成は、水平方向にラップされています

HTML

<div id="item-container"></div> 

はJavaScript：

for (var i = 0; i <= 150; i++) { 
    $("<li class='items grid'>item " + i + "</li>").appendTo("#item-  
    container"); 
} 

CSS jsfiddleで

li.grid { 
     display: inline-block; 
     border: 1px solid #333; 
     background-color: #000; 
     color: #fff; 
     padding: 30px 30px 30px 30px; 
     background-image: linear-gradient(to bottom right, #eee, #ddd); 
    } 

現在の実装：http://jsfiddle.net/Ldh9beLn/9/

Answer 1

HTML要素の通常の流れは、インライン要素とインラインブロック要素に対して水平です。達成しようとしているのは列に関連しています。 item-container要素を列に分割する必要があります。

最初のオプションは、CSS3の列カウントまたはフレックスを使用することです。

#item-container{ 
    column-count: 4; 
} 

古いブラウザもサポートする必要がある場合は、jsフォールバックを実装できます。あなたに役立つかもしれないjquery pluginがあります。

第2のオプションは、要素をコンテナ要素を使用して列に分割することです。列の中に10個の要素をすべてラップし、次のように列ラッパーに適切なCSSを使用します。

for (var i = 0; i <= 150; i++) { 
    if(i%10 == 0) $("<div class='column'></div>").appendTo("#item-container"); 
    $("<li class='items grid'>item " + i + "</li>").appendTo("#item-container > .column:last-child"); 
} 

.column{ 
    width: 35px; 
    border: 1px solid; 
    float: left; 
    margin: 30px; 
} 

Answer 2

私は解決策を見つけ出すが、必要なグリッドレイアウトに応じて、column1とcolumn7を切り替えるには2つのクラスを作成します。関連するCSSクラスを持つ

$('.item-container').removeClass('column7').addClass('column1'); 

と

$('.item-container').removeClass('column1').addClass('column7'); 

：

.column1{ 
    column-count: 1; 
} 
.column7{ 
    column-count: 7; 
}