将方形 div 拆分为 n 个较小的 divs 算法

Question

我有一个方形容器div，width & height设置为200px。 我将收到一个number (e.g. 3, 10, 20, 30)，需要在container div中创建该数量的矩形或正方形divs以填充空间。

问题：

假设中间没有额外的空间(边距和填充(，我如何找到这些内divs的width & height？理想情况下，它们应尽可能靠近正方形。

例：

如果数字是 100，则内部宽度和高度将是 20px，相当简单。 如果数字为 3，则内部宽度可以是 33%，高度可以是 100%，反之亦然。

Answer 1

我认为这个想法是找到彼此尽可能接近的一对除数(互补除数(。换句话说，这将是一对具有最小和的除数。

对于 3，

这将是 1 和 3。

20 可以通过乘以 1×20、2×10、4×5(和对称(得到。最接近的除数(或除数之和(是 4x5。

对于 30

(1x30、2x15、3x10 和 5×6(，您将获得 5x6。

一旦你有了一对除数，你就知道如何堆叠盒子，并且可以计算每个盒子的宽度和高度。

例如，对于 30，您需要有 5 行和 6 列框(或相反(。所以你把 200 除以 5 得到一个盒子的高度，200 乘以 6 给你智慧。

最后，您可能必须舍入到像素。

Answer 2

您需要在此处提出两个主要条件。

首先：如果数字是奇数，则只需将 200 除以收到的数字并将其定义为每个矩形的宽度(对于奇数，您不能在每行上都有相等数量的div，因此您不能超过 1 行(。

第二：否则，将给定的数字除以 2，直到它是奇数或等于 2。你可以为此使用 while 循环：

while (n % 2 == 0 && n !== 2) { 
    n = n / 2;
    numRows = numRows * 2;
    numColumns = n
}

其中"n"是给定的数字，"numRows和"numColumns"是声明的变量。

这将为您提供所需的行数以及每行所需的列数。从这里开始，您将行数除以 200，将列数除以 200，得到每个块的宽度和高度。

我希望我的逻辑是合理的，这是有帮助的。

Answer 3

首先，

您必须找到添加的div数字是正方形还是不使用Math.sqrt() % 1 === 0 jQuery...如果是平方，通过将100%除以该数字的平方根来计算width和height...

如果数字不是平方的，则只需通过将100%除以div 数来计算width

堆栈代码段

$(document).on("click", "#click", function() {
  var n = $("#input").val();
  var sqrtNo = Math.sqrt(n);
  $(".parent").html("");
  for (var i = 0; i < n; i++) {
    $(".parent").append("<div class='child'></div>");
  }
  if (sqrtNo % 1 === 0) {
    $(".child").css({
      "width": (100 / sqrtNo) + "%",
      "height": (100 / sqrtNo) + "%"
    });
  } else {
    $(".child").css({
      "width": (100 / n) + "%"
    });
  }
})

.parent {
  height: 200px;
  width: 200px;
  background: red;
  display: flex;
  margin: 10px 0;
  flex-wrap: wrap;
}
.child {
  background: yellow;
  border: 1px solid red;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input" placeholder="Enter no of divs">
<input type="button" id="click" value="click">
<div class="parent"></div>