我有一个包含100个“列表项”的“有序列表”。这个ol使得我的页面非常长,用户需要滚动很多。
我该如何使UL显示如下:
1. 6. 11.
2. 7. 12.
3. 8. 13.
4. 9. 14.
5. 10. 15.
我有一个包含100个“列表项”的“有序列表”。这个ol使得我的页面非常长,用户需要滚动很多。
我该如何使UL显示如下:
1. 6. 11.
2. 7. 12.
3. 8. 13.
4. 9. 14.
5. 10. 15.
1. 2. 3. 4.
5. 6. 7. 8.
9. 10. 11. 12.
您可以通过以下方式设置li元素:
li {
display: block;
width: 25%;
float: left;
}
它应该能够工作。如果你需要按垂直顺序排列它们,则需要在 PHP 脚本中将它们分成单独的 div,并使用浮动(float)将它们排列。
function splitList($list, n) {
var i, k;
var colHeight = Math.ceil($list.children().length / n)
var colWidth = Math.floor(100 / n) + "%"
for (i = 0; i < n; i++) {
$list.append("<ul class='liCol'></ul>")
for (k = 0; k < colHeight; k++) {
$list.children("li").eq(0).appendTo(".liCol:last")
}
}
$(".liCol").css("width", colWidth)
$list.show() // list originally hidden to avoid displaying before ready
}
.liCol {
padding: 0px;
margin: 0px;
float: left;
}
ul {
list-style-type: none;
counter-reset: section;
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
ul li {
padding-left: 30px;
position: relative;
}
ul li:before {
counter-increment: section;
content: counter(section) ".";
margin: 0 0 0 -34px;
text-align: right;
width: 2em;
display: inline-block;
position: absolute;
height: 100%;
}
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<script type="text/javascript">
// As soon as the document's structure has been loaded:
document.addEventListener( "DOMContentLoaded", function() {
// For each html elem:
elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later.
for ( var e = 0; e < elems.length; e++ ) {
// Check if elem is a list (ordered/unordered) and has class name "cols":
if ( ( elems[e].tagName == "OL" || elems[e].tagName == "UL" ) && elems[e].className.search("cols") > -1 ) {
// Collect list items and number of columns (from the rel attribute):
var list = elems[e];
var listItems = list.getElementsByTagName("LI");
var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int.
// Determine total number of items, items per column and column width:
var Ntotal = listItems.length;
var Npercol = Math.ceil( Ntotal/Ncols );
var colWidth = Math.floor( 100/Ncols )+"%";
// For each column:
for ( var c = 0; c < Ncols; c++ ) {
// Create column div:
var colDiv = document.createElement("DIV");
colDiv.style.cssFloat = "left";
colDiv.style.width = colWidth;
// Add list items to column div:
var i_start = c*Npercol;
var i_end = Math.min( (c+1)*Npercol, Ntotal );
for ( var i = i_start; i < i_end; i++ )
colDiv.appendChild( listItems[0] ); // Using listItems[0] instead of listItems[i], because items are moved to colDiv!
// Add column div to list:
list.appendChild( colDiv );
}
}
}
} );
</script>
<ol class="cols" rel="3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ol>
因此,设置 class="cols" 和 rel="[number_of_columns]",脚本将完成其余工作!
我已经研究了这个问题,并找到了一个适用于所有浏览器的解决方案。
我的HTML列表:
<ol class="list-items">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li class="second-list">Item5</li>
<li class="second-list">Item6</li>
<li class="second-list">Item7</li>
<li class="second-list">Item8</li>
</ol>
注意,我给最后4个列表项添加了一个名为second-list的类,这对我们的jQuery很重要。
接下来,在我的网页上,我在第二列中创建了一个带有second-list-appender类的div,这是我想要放置第二个列表的列。
var secondListStart = $(".list-items").children().length - 3;
$(".second-list-appender").append($("<ol start=" + secondListStart + ">"));
$(".second-list-appender ol").append($(".second-list"));
$(".second-list-appender").append($("</ol>"));
看,我实际上是从一个列表中生成了两个列表,但通过在第二个列表的起始处使用前一个列表的下一个数字,让它看起来像一个有两列的列表。
我用两列实现了它,但你也可以重复这个过程,或创建一个函数,并在循环内调用该函数,以重复多少次都可以。
由于我遇到了同样的问题,找不到任何“干净”的解决方案,所以我想发布我的解决方案。在这个例子中,我使用了一个反向的while
循环,这样我就可以使用splice
而不是slice
。现在的优点是splice()只需要一个索引和一个范围,而slice()需要一个索引和总数。后者在循环时往往变得困难。
缺点是我需要在附加时反转堆栈。
示例:
cols = 4; liCount = 35
使用slice的for循环= [0, 9]; [9, 18]; [18, 27]; [27, 35]
使用splice的反向while = [27, 8]; [18, 9]; [9, 9]; [0, 9]
代码:
// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
var children = list.children(),
target = list.parent(),
liCount = children.length,
newUl = $("<ul />").addClass(list.prop("class")),
newItems,
avg = Math.floor(liCount / cols),
rest = liCount % cols,
take,
stack = [];
while (cols--) {
take = rest > cols ? (avg + 1) : avg;
liCount -= take;
newItems = children.splice(liCount, take);
stack.push(newUl.clone().append(newItems));
}
target.append(stack.reverse());
list.remove();
}