เบราว์เซอร์ที่ทันสมัย
ใช้ประโยชน์จากโมดูลคอลัมน์ css3 เพื่อสนับสนุนสิ่งที่คุณกำลังมองหา
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
http://jsfiddle.net/HP85j/8/
เบราว์เซอร์ดั้งเดิม
น่าเสียดายสำหรับการสนับสนุน IE คุณจะต้องใช้โซลูชันรหัสที่เกี่ยวข้องกับการจัดการ JavaScript และ dom ซึ่งหมายความว่าเมื่อใดก็ตามที่เนื้อหาของรายการเปลี่ยนแปลงคุณจะต้องดำเนินการเพื่อจัดลำดับรายการใหม่ลงในคอลัมน์และพิมพ์ซ้ำ การแก้ปัญหาด้านล่างใช้ jQuery เพื่อความกระชับ
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;
}
แก้ไข:
ดังที่อธิบายไว้ด้านล่างนี้จะเรียงลำดับคอลัมน์ดังต่อไปนี้:
A E
B F
C G
D
ในขณะที่ OP ขอตัวแปรที่ตรงกับต่อไปนี้:
A B
C D
E F
G
ในการทำให้ชุดตัวเลือกสำเร็จคุณเพียงแค่เปลี่ยนรหัสเป็นดังต่อไปนี้:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}