随机将图像放在<div>中并确保均匀分布</div>

Question

我有一个矩形的html div，尺寸为X和Y.让我们说这个div的中心位于x（c）和y（c）。我有维度x（i）和y（i）的N个图像。图像大小大约是包含div的1/8，每个图像大小与其余图像大小不同。

将这些图像放在这个div中的好方法是什么，以便它们在每个页面加载时均匀分布（但随机放置）。看一下javascript实现。

编辑：在dascandys回答之后，我想我可以更好地提出这个问题。我的意思是每个页面加载的图像加载的随机序列，但保持外观和感觉平衡。

Answer 1

您实际上并没有寻找随机分布。真正随机意味着它的一部分是空的，而另一个角落中的两个是重叠的。

如果你想要科学，你可以使用一个随机生成的Voronoi图和N点和Lloyd算法来将它们移动到更均匀的分布。

如果您更喜欢实用的方法，只需将它们放在随机位置并反复查看它们是否重叠，如果是，则将它们分开。对于8张图像来说，这会比较慢，但仍然超出人类的感知速度。

Answer 2

这就是spatial Poisson distribution的发明。 尝试例如this link了解如何生成积分。我会采用一些蒙特卡罗方法在2D中生成随机点（使用谷歌）。

还有一种非常简单的方法叫做抖动，但它并不像Poisson和MC那样详尽。你只需要定义一个矩形迷宫点，然后随机地“抖动”这些点：

for i = 1 .. m
    for j = 1 .. n
        ouput point [i * maze_size + rand(maze_size/2), 
                     j * maze_size + rand(maze_size/2)]