Упорядоченный список по вертикали на нескольких столбцах в JS

Question

Упорядоченный список по вертикали на нескольких столбцах в JS

1

Сфера применения этого вопроса - только родной 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'));
  }
}

Но теперь я ищу более общую функцию, поэтому я могу просто передать функции количество столбцов.

Вы знаете реализацию?

arsenik 09 сен. 2017, в 17:01

Источник

0

обязательно ли, чтобы элемент E был последним элементом <span> , а не элементом I ?
RomanPerekhrest 09 сен. 2017, в 14:50
0

да, I последний элемент, он должен быть в последнем интервале последнего столбца.
arsenik 09 сен. 2017, в 14:53

Теги:

javascript

1 ответ

Ещё вопросы

обязательно ли, чтобы элемент E был последним элементом <span> , а не элементом I ?
да, I последний элемент, он должен быть в последнем интервале последнего столбца.

Nina Scholz · Accepted Answer · 2017-09-09T12-53-00.000Z

Вы можете указать количество столбцов и использовать 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] равно false. в основном, если элемент не является массивом, присвойте массив.