Question

我想将一个JSON数据数组分发到div元素中。为了给出一些想法，我做了以下fiddle。下面的文字对应于小提琴的解释以及到目前为止我得到的内容。

绿框是输入数据。我将它表示为一个表格，只是为了给它一个简单的视图。
洋红色方框是目的地方框。

场景是我收到绿色框，我必须把它变成洋红色框。为了对初始数据进行分区，我创建了一个算法如下：

我计算 stats.names 数组的最大宽度。
我计算 stats.values 数组的最大宽度。通常它们都是一样的。我使用等宽字体来获得单个字符的宽度。步骤1和步骤2中的结果总和给出了列的宽度（请参阅fiddle中的洋红色框中的黑框）
我计算洋红色盒子的可用宽度。
我使用Math.floor操作计算适合洋红色框的最大列数。
我根据输入数据计算每列需要多少元素（每个黑盒子的元素）。小提琴中的这个数字是固定的，但实际上我必须检查，知道列的最大数量和每列的宽度，如果这足以显示完整的数据数组。
我以类似于函数 sol1（）的方式创建HTML结构，您可以在小提琴中看到它。该算法的结果是洋红色框中的黑框。

我遇到的问题是这个算法不是很准确，因为在大多数情况下最大宽度太大，因为输入数据我不是先验的。因此，这会产生糟糕的结果。具体地说，它漂浮在橙色盒子下面的洋红色盒子上，因为没有足够的空间放在右边。以下代码显示了我如何计算 maxWidth ：

var CHAR_W = getLetterWidth(), maxNW = 0,
    statsLen = stats.names.length, maxVW = 0;

for (var n=0; n<statsLen; n++)
{
    var valsLength = stats.values[n].length,
        namsLength = stats.names[n].length;
    if (namsLength *CHAR_W > maxNW)
    {
        maxNW = (namsLength *CHAR_W);
    }
    if (stats.values[n].toString().length*CHAR_W > maxVW)
    {
        maxVW = (valsLength*CHAR_W);
    }
}
    var maxW = maxVW+maxNW, w = <Available width of the magenta box>,
    maxCol = Math.floor(w/maxW);

我的想法是，我没有固定的名称宽度，我不知道我会收到什么。我认为Math.floor函数也引入了一些问题。有时我得到4.7878列，事实上，真实数据完全适合剩下的0.7878。但是 maxWidth 大于它在分割后剩余的空间，然后div浮动在我想要避免的范围之下。

问： 如何根据可用空间将数据分成列？

如何根据可用空间分隔多列布局中的数据？

0 个答案: