随机定位图像，不重叠答案

【问题标题】：Randomly position images with no overlapping随机定位图像，不重叠
【发布时间】：2012-06-10 15:57:41
【问题描述】：

我正在使用 Wordpress 并使用他们的代码，我将上传的画廊作为无序列表的图像输出到特定页面。

我想知道是否有一种方法可以使用 JS 将这些图像绝对定位在容器中（这将是相对的）并且没有任何重叠？因此，它必须定位它们，然后记下该图像的位置，并确保下一个图像不重叠等。

这应该是每次随机生成，但我也想知道是否可以使图像及其位置每次都相同？

谢谢大家，期待一些想法。

-R

编辑：您可以在此处查看 HTML 和进度：http://richgc.com/freelance/staton/furniture/

【问题讨论】：

你希望它是随机的，而且每次都一样？你能澄清一下吗？
道歉。如果每次的位置都相同，那就太好了（我只是觉得随机功能会更容易，所以感谢任何帮助）。
试试这个插件isotope.metafizzy.co
你看，我有这个：$('.each-image').each(function() { $(this).css({ 'top': Math.floor(Math.random() * 100 - 50) + 'px', 'left': Math.floor(Math.random() * 100 - 50) + 'px' }); }); 但图像显然重叠......我有什么办法可以避免这种情况发生？
如果您将所有图像制作为float: left 和一个块，浏览器会执行此操作，但是这可能会在它们旁边留下可用空间。所以这只是一个非常糟糕的解决方案，但有时这可行。

【解决方案1】：

有几个 jquery 插件可以做到这一点。这是一个：

【讨论】：

【解决方案2】：

使用@lucuma 的回答（我不知道有预先存在的插件）。

如果您要手动实现这样的插件，您可以使用 cutting algorithm，传统上用于优化从钣金切割零件，以确定不会重叠的图像位置。

如果您选择确定性算法，则应始终在正确的位置获取图像的占位符。如果图像总是大小不同，这将确保图像总是出现在同一个地方。由于许多图像可能具有相同的大小，因此您可以将图像分配给例如“剪切槽”中的图片文件名的字母顺序。

【讨论】：