jquery - 如何防止使用jquery随机定位的图像重叠

Question

我有一个画廊，它在每个页面加载时随机放置在.container中。

我的问题是有时加载页面时图像重叠。还有图像不在.container内

JS 很简单：

$(document).ready(function() {
    $('.picture').each(function(i) {
        $pT=$(this).height();
        $pL=$(this).width();
        $(this).css({
            top:Math.floor(Math.random()*$pT)*i*2,
            left:Math.floor(Math.random()*$pL)*i*2
        });
    });
});

http://jsfiddle.net/AHReF/

我在网上寻找一种 jquery 解决方案来防止图像重叠，但我找不到适合我的特殊性的解决方案。如果您只是看看我的问题并分享您的一些科学知识，我将非常感激。谢谢！

Answer 1

这个问题在此之前被问过：重叠元素 - HTML、CSS 和 jQuery

我已经在你的小提琴中为你的案例修改了代码：http: //jsfiddle.net/AHReF/1/

定义 containerW 和 containerH（画廊的宽度和高度）以避免将图片放在您想要的位置之外。

我们必须将每张图片的尺寸和坐标保存在其中，positions并且在尝试获取随机坐标（左上角的值）时，我们会与现有的坐标进行比较以查看它是否重叠。