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

Question

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

问题：

如何找到这些内部 divs 的 width & height，假设它们之间没有额外的 space（边距和填充）？理想情况下，它们应该尽可能接近正方形。

示例：

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

Answer 1

首先你要判断加的div数是正方形还是不使用Math.sqrt() % 1 === 0 jQuery...如果是正方形，计算width和 height 通过将 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>

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

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

对于 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。

最后可能需要四舍五入到像素。

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

Splitting square div in to n smaller divs algorithm

javascript

css

algorithm

geometry

packing