如何使用 Javascript 将动态生成的按钮拆分为列？答案

【问题标题】：How to split dynamically generated buttons into columns using Javascript?如何使用 Javascript 将动态生成的按钮拆分为列？
【发布时间】：2013-03-18 09:49:37
【问题描述】：

我有 Javascript 代码可以生成两种类型的按钮。一个标题按钮，然后是下面不同数量的内容按钮。我使用 CSS3 将按钮拆分为带有“-webkit-column-break”的列，但这在 Internet Explorer 或 Safari 中无法正常工作。

我想到了一种自定义 Javascript 的方法。我只是想知道这是否可能，以及我如何完成它。这是我的伪代码；

create 3 divs - 1, 2, and 3

count header array.
divide count by 3 to find number to place in each column.

create a counter.
for each header placed increase count by 1.
if count is equal to column maximum then use div 2.
if div2 count is equal to column maximum then use div 3.

我可以看到这种方法的一个问题是它没有考虑到标题下方的列数不同。如果可能的话，我希望第 1 列和第 2 列的长度相等，或者所有 3 列都相等。

【问题讨论】：

标签： javascript multiple-columns

【解决方案1】：

已修复。我是这样做的

JS Fiddle here

 var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
mycars[3] = "Porsche";
mycars[4] = "Daewoo";
mycars[5] = "MG";

var arrayCount = mycars.length;

var columnLength = arrayCount / 3;

for (var i=0; i < mycars.length; i++)
{

if (i<columnLength)
{
      document.getElementById('carList').innerHTML += '<button class="countryButtons"> '+       mycars[i]+' </button><br />';
}
else if(i< columnLength*2)
{
 document.getElementById('carList2').innerHTML += '<button class="countryButtons"> '+    mycars[i]+' </button><br />';
 }
    else if(i< columnLength*3)
{
 document.getElementById('carList3').innerHTML += '<button class="countryButtons"> '+      mycars[i]+' </button><br />';
   }
  }

【讨论】：