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

此问题在此之前被问过：Overlapping elements - HTML, CSS, and jQuery

我已经在您的小提琴中调整了您的案例代码：http://jsfiddle.net/AHReF/1/

定义containerW和containerH（图库的宽度和高度），以避免将图片移到您想要的位置之外。

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

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

1 个答案: