Modern Tarayıcılar
aradığınızı desteklemek için css3 sütun modülünden yararlanın.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
http://jsfiddle.net/HP85j/8/
Eski Tarayıcılar
Ne yazık ki IE desteği için JavaScript ve dom manipülasyonu içeren bir kod çözümüne ihtiyacınız olacak. Bu, listenin içeriği her değiştiğinde listeyi sütunlara göre yeniden sıralamak ve yeniden yazdırmak için işlemi yapmanız gerekeceği anlamına gelir. Aşağıdaki çözüm kısalık için jQuery kullanır.
http://jsfiddle.net/HP85j/19/
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
(function($){
var initialContainer = $('.columns'),
columnItems = $('.columns li'),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data('columns')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $('.columns');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS:
.columns{
float: left;
position: relative;
margin-right: 20px;
}
DÜZENLE:
Aşağıda belirtildiği gibi bu sütunları aşağıdaki gibi sıralayacaktır:
A E
B F
C G
D
OP aşağıdakilerle eşleşen bir değişken istedi:
A B
C D
E F
G
Değişkeni gerçekleştirmek için kodu aşağıdaki şekilde değiştirmeniz yeterlidir:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
