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

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 得到 witdh。

最后你可能不得不四舍五入到像素。

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

首先你必须使用Math.sqrt() % 1 === 0 jQuery 找到添加的div 数字是否为正方形...如果是正方形，则通过将100% 除以该数字的平方根...

如果数字不是平方数，则只需将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>