JavaScript/jQuery:查找列大小差异最小的排列

Question

我正在尝试基于JSON数据动态填充页面的内容。JSON是一个单独对象的数组，每个对象都包含不同办公室位置的位置数据。

到目前为止，我已经能够遍历所有的JSON，并创建一个唯一的状态名称列表（办公室所在的每个州），然后使用构造函数创建一个新的state对象，该对象包含state的名称，以及该状态下每个办公室的html对象数组（按字母顺序）。这些状态对象存在于容器数组中。

以下是容器数组和构造的State对象的示例：

var states = [State, State, State, State];
states[0].stateHTML => $('<li class="state">California</li>')
states[0].officeHTML => [Office, Office]
states[0].officeHTML[0] => $('<li class="office">' +
                             '<span>' + Some Office + '</span>' +
                             ...
                             '<span>' + Phone + '</span>' +
                             '</li>')

我遇到的问题是，这需要以3列布局显示，我希望列的大小大致相等。每一列都是一个div，里面嵌套了一个ul。我尝试过将唯一的州的数量除以三，然后将许多州添加到每一列中，但不幸的是，这些州的办公室数量不相等，因此这种方法会导致列非常不均匀。

我在想，既然我知道每个州的办公室数量，就必须有某种方法来计算每个栏的分配，使每个栏的办公室数量最接近办公室总数/3。

示例：

offices.length => 20
states.length => 6
states[0].offices.length => 7
states[1].offices.length => 2
states[2].offices.length => 1
states[3].offices.length => 4
states[4].offices.length => 5
states[5].offices.length => 1

因此，假设3列中有20个办公室，那么每列大约有6.66个办公室。只要将相等数量的状态添加到每列中，就会得到2个状态/列。但这将导致第1列有9个办公室，第2列有5个，第3列有6个。然而，考虑到每个州的办公室总数，最好的显示方式是：

Column1 => states[0] (7 offices)
Column2 => states[1,2,3] (7 offices)
Column3 => states[4,5] (6 offices)

附言：我应该提到，如果有一种使用CSS（flex或类似的东西）的方法可以做到这一点，我对此持开放态度。但我在这种方法中没有对列的最大高度进行硬编码（这无法解释不同数量的办公室），这是不成功的。

编辑：这是渲染页面的代码笔示例http://codepen.io/anon/pen/JGYgEW

Answer 1

只是为了好玩，一种没有"切割"状态和保持数组顺序的方法。它使用单独的states[n].offices.length和每个列可用的槽的平均基数来填充列。希望它能有所帮助！http://jsfiddle.net/ch1qui/y1yva4w8/2/