javascript - 将区域划分为给定数量的正方形

Question

我有一个可以由用户调整大小的 DIV 元素。在这个 DIV 中，我想绘制给定数量的正方形。现在我需要找出正方形的完美边长应该是多少，以便所有内容都适合 DIV 而不会溢出。

这是我到目前为止得到的:

function CalcSize (){
    var number = 23; // Example-Number
    var area = jQuery('#container').height() * jQuery('#container').width();
    var elementArea = parseInt(area / number);
    var sideLength = parseInt(Math.sqrt(elementArea));
    return sideLength;
}

这使得正方形太大，因为它不会“丢弃”不能用正方形填充的空间。通过搜索这个问题，我找到了 Packing Problem和 Treemapping，但两者都没有帮助我解决我的问题，因为老实说我缺乏数学技能，而且据我所知，解决方案允许诸如非正方形和旋转之类的事情。

谢谢!

更新:

我目前使用一种非常粗略的方法来调整正方形的大小，方法是不断调整它们的大小并查看它们是否溢出。这种方法给了我正确的结果，但性能很差。我相信这可以通过计算来实现。

Answer 1

这是一个算法，它将使用整个宽度，所有未使用的空间将位于底部。这不会总是给出尽可能大的方 block ，但它会以一致的方式运行并且看起来应该不错。

请注意，while 循环通常不应超过一两次迭代。

function CalcSize (){
    var number = 23; // Example-Number
    var width = jQuery('#container').width();
    var height = jQuery('#container').height();
    var area = height * width;
    var elementArea = parseInt(area / number);

    // Calculate side length if there is no "spill":
    var sideLength = parseInt(Math.sqrt(elementArea));

    // We now need to fit the squares. Let's reduce the square size 
    // so an integer number fits the width.
    var numX = ceil(width/sideLength);
    sideLength = width/numX;
    while (numX <= number) {
        // With a bit of luck, we are done.
        if (floor(height/sideLength) * numX >= number) {
            // They all fit! We are done!
            return sideLength;
        }
        // They don't fit. Make room for one more square i each row.
        numX++;
        sideLength = width/numX;
    }
    // Still doesn't fit? The window must be very wide
    // and low.
    sideLength = height;
    return sideLength;
}