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

我试图基于JSON数据动态填充页面内容。JSON是单个对象的数组，每个对象都包含不同办公地点的位置数据

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

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

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个栏中有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或类似的东西）实现这一点，我对此持开放态度。但是，如果没有硬编码列的最大高度（这不能解释不同数量的办公室），这种方法是不成功的

---

编辑：这里是一个代码笔示例，它只是为了好玩而呈现页面，这种方法没有“剪切”状态和保持数组顺序。 它使用单个

状态[n].offices.length

和每列的插槽平均基数填充列。希望有帮助！

---

这是一个优化问题，您试图最小化3列内容的平均高度。你能在下一列的顶部重复同样的状态并继续吗？如果是这样，那就很容易了。如果不是，什么纳粹头目。。。别担心，哈哈。如果你能将办公室提取到一个一维数组中，创建包含每个办公室的状态信息和办公室信息的新对象，可能会更容易。然后，您只需遍历该列表，将办公室分配给每个列。@toddmo不幸的是，理想的结果是每个状态头只包含一次（我在问题中添加了一个代码笔示例）。如果不重复标题就无法做到这一点，那可能是最后的选择。为什么不开始按行分配办公室，每个办公室有3列。这是限制吗？“这将始终确保最小柱高。”蝙蝠咆哮我不确定我是否理解这个建议。排成一行会得到相等的列大小，但是（除非我弄错了）您将无法按状态对它们进行垂直分组（如codepen示例中所示）。谢谢！这几乎是完美的，但我的实际数据有问题。它正在移动到#col[3]，我不知道如何修复它。以下是实际数字：

officeselen=19个州len=12个州=[]；州[0]=1州[1]=3州[2]=4州[3]=2州[4]=1州[5]=1州[6]=1州[7]=1州[8]=1州[9]=1州[10]=2州[11]=1

问题是，该代码不会削减任何州的职位，第三个州也不会出现在第一列（总共留下8个职位）。为了使分布更加均匀，您应该允许一个州在下一专栏中继续解析办公室：非常感谢！这不完全是我所希望的，但我认为这是我能做的最好的事情，而不必求助于我早已忘记的统计数学（我认为是标准差）。

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