0

假设我有一个 765px 宽 x 530px 高的容器 div。

我想用 30 个较小的 div 动态填充尽可能多的 div。由于容器 div 是一个矩形，因此填充 div 也应该是一个矩形。基本上，我不想要正方形，我想要填充空间。

公式是什么？

谢谢！

4

3 回答 3

0

使用 30，您可以制作 5 x 6 的网格，因此将高度除以 6，宽度除以 5，或者高度除以 5，宽度除以 6。如果 div 必须具有整数大小，您将无法填充宽度或高度但是有 6，因为两者都不能被 6 整除...

于 2013-02-20T21:45:08.083 回答
0

让我看看我是否可以为您扩展一下您的问题。

您有一个具有 widthw和 height的容器h，并且您想用n相同大小的矩形填充它。您想找到x, y, 这样x * y = n, 但您希望大约w/x等于赏心悦目。h/y1xn

首先，如果n是一个素数，您要么需要稍微放松一下假设，要么最终得到一堆薄片。否则，我将遍历 的所有因子n，并为每个因子x计算y=n/x，然后计算w/x和h/y。然后选择|w/x - h/y|最小的那对，您将拥有最多的“方形” div，您可以将它们放入该容器的网格中。

在你的情况下。w=765 和h=530。30 的因数是 1、2、3、5、6、10、15、30。我们考虑以下对，这将导致以下 div 大小（向下舍入）：

  • (1, 30) - (765, 17)
  • (2, 15) - (382, 35)
  • (3, 10) - (255, 53)
  • (5, 6) - (153, 88)
  • (6, 5) - (127, 106)
  • (10, 3) - (76, 176)
  • (15, 2) - (51, 265)
  • (30, 1) - (25, 530)

在这种情况下，这对的最小差异与(127, 106)您使用公式得出的相同，但您可以想象，如果您有一个又长又薄的容器，或者由于某种原因您更喜欢使用子 div不同的纵横比不是方形的。在这种情况下，您会选择最合适的部门。

于 2013-02-20T22:01:49.797 回答
0

因此，要找到每件的宽度和高度，其中 N 是您拥有的件数（在这种情况下为 30），H 是要填充的盒子的高度（在这种情况下是 530），W 是要填充的盒子的宽度填充（在这种情况下为 765）...

eachPieceWidth = floor(W/ceil(sqrt(N)))
eachPieceHeight = floor(H/(N/ceil(sqrt(N)))

导致...

eachPieceWidth = floor(765/ceil(sqrt(30)))
eachPieceHeight = floor(530/(30/ceil(sqrt(30)))

导致...

eachPieceWidth = 127
eachPieceHeight = 106
于 2013-02-20T21:57:25.273 回答