我正在从数据库中获取未知数量的数据元素。每个元素都将显示在一些<div>中。我知道我想显示4列,但从上到下填充数据。如果我得到一个数组:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]显示如下:有没有简便的方法来使用bootstrap,或者我必须先计算元素的数量,然后在迭代它们的同时分配新的行/列?
<div>
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
hiz5n14c1#
我能想到的最好的解决方案是用total elements count除以total columns count,然后对结果应用Math.ceil,就像您在问题中提到的那样,您只需迭代the number of columns和the number of elements per column,并将每个元素添加到适当的列中。
total elements count
total columns count
Math.ceil
the number of columns
the number of elements per column
超文本标记语言:
<div class="row" id="container"> <div class="col-3"> </div> <div class="col-3"> </div> <div class="col-3"> </div> <div class="col-3"> </div> </div>
脚本语言:
window.onload = function() { var container = document.getElementById("container"); var columns = container.children.length; var elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; var elementsPerColumn = Math.ceil(elements.length / columns); var index = 0; for (var i = 0; i < columns; i++) { var column = container.children.item(i); for (var j = 0; j < elementsPerColumn; j++) { var item = elements[index]; if (item != undefined) { var divElement = document.createElement('div'); divElement.classList.add('my-div'); divElement.innerHTML = item; column.appendChild(divElement); } index++; } } };
https://jsfiddle.net/bp145k9u/2/(把我的答案贴出来,以防有人觉得有用。)
1条答案
按热度按时间hiz5n14c1#
我能想到的最好的解决方案是用
total elements count
除以total columns count
,然后对结果应用Math.ceil
,就像您在问题中提到的那样,您只需迭代the number of columns
和the number of elements per column
,并将每个元素添加到适当的列中。超文本标记语言:
脚本语言:
https://jsfiddle.net/bp145k9u/2/
(把我的答案贴出来,以防有人觉得有用。)