Сфера применения этого вопроса - только родной Javascript.
У вас есть упорядоченный список из 9 элементов.
var elements = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
Вы хотите создать эту структуру, имеющую 2 столбца. Последний столбец может иметь 1 меньше строки, чем первый, поскольку нечетное число элементов.
<div>
<span>A</span><span>F</span><br>
<span>B</span><span>G</span><br>
<span>C</span><span>H</span><br>
<span>D</span><span>I</span><br>
<span>E</span>
</div>
Я придумал этот подход, чтобы начать.
var container = document.createElement('div');
var elements = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
var index = 0;
var midpoint = Math.ceil(elements.length / 2);
var line = "";
for (var i = 0; i < elements.length; i++) {
if (i == 0) {
index = 0
}
else if (i % 2 == 1) {
index = midpoint + Math.floor(i / 2);
}
else if (i > 0) {
index = i - i / 2;
}
var el = document.createElement('span');
el.innerText = elements[index];
container.appendChild(el);
if (i > 0 && i % 2 == 1) {
container.appendChild(document.createElement('br'));
}
}
Но теперь я ищу более общую функцию, поэтому я могу просто передать функции количество столбцов.
Вы знаете реализацию?
Вы можете указать количество столбцов и использовать Array#reduce
взяв длину, деленную на cols для подсчета строк. Результатом является массив с требуемыми столбцами и строками.
Этот массив повторяется для желаемого вывода.
var array = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
cols = 3,
target = document.body;
array
.reduce(function (r, a, i, aa) {
var index = i % Math.ceil(aa.length / cols);
r[index] = r[index] || [];
r[index].push(a);
return r;
}, [])
.forEach(function (a) {
a.forEach(function (b) {
var span = document.createElement('span');
span.appendChild(document.createTextNode(b));
target.appendChild(span);
});
target.appendChild(document.createElement('br'));
});
r[i % l] = r[i % l] || [];
r[i % l]
равно false. в основном, если элемент не является массивом, присвойте массив.
E
был последним элементом<span>
, а не элементомI
?I
последний элемент, он должен быть в последнем интервале последнего столбца.