Question

此问题的范围仅为原生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'));
  }
}

但是现在我正在寻找一个更通用的函数，所以我可以将函数传递给函数。

您知道实施吗？

Answer 1

您可以指定cols的数量，并使用Array#reduce将长度除以行数的cols。结果是一个包含所需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'));
    });

JS

1 个答案: