Javascript 修复我的随机图像定位脚本，使图像不'；t重叠

我制作了一个脚本（），用于随机定位

元素

不过，这些元素彼此重叠

如何修改代码，使项目不再重叠

以下是脚本：

var images = [];

function init() {
    $('.friend-selection li > div').each(function(){
        var id = this.id;
        var img = $('#img_' + id);
        var randomTop = 500*Math.random(); //random top position
        var randomLeft = 500*Math.random(); //random left position

        $("#parent_" + id).css({ //apply the position to parent divs
            top : randomTop,
            left : randomLeft
        });
    });
};

init(); 

我有这个html。带有li项目的ul：

<li id="parent_picture1">
    <div id="picture1">    
        <div class="glow"></div>
        <img src="static/img/voorbeeld/vrouw.jpg" width="111" height="166" id="img_picture1">
        <span class="name">Naam Achternaam</span>
    </div>      
</li>

纳姆·阿切特纳姆

我需要对这个问题有更多的了解，才能决定如何解决这个问题，但这里有一些可行的想法

如果所有图像都具有相同的大小，您应该能够使用模数执行某些操作，例如

randomTop=（500*Math.random（））%picWidth

当然，您需要跟踪已经使用的插槽，因此如果图片数组将是密集的，我可能会将插槽添加到随机数组中，并对其进行迭代

        var slots = [];

        for (var y = 0; y < 5; y++)
        {
            for (var x = 0; x < 5; x++)
            {
                slots.push([x, y]);
            }
        }

        slots.sort(function () { return (0.5 - Math.random()); });

        $('.friend-selection li > div').each(function() { ... }

var slots=[]；
对于（变量y=0；y<5；y++）
{
对于（变量x=0；x<5；x++）
{
槽。推动（[x，y]）；
}
}
sort（函数（）{return（0.5-Math.random（））；}）；
$（'.friend selection li>div'）。每个（函数（）{…}

（请注意，我使用的随机方法。）

---

如果图片的大小不固定，事情会变得更复杂。我会先看看代码、想法甚至完整的解决方案。

您需要将每个随机位置的坐标保存在一个数组中

对于每个

：

• 获取一个随机坐标对

  随机坐标

  。
  • 对

    位置数组中的每对进行
    随机坐标检查
    ：
    
    随机坐标[0]+您的
    的宽度是否与
    位置数组[i][0]+您的
    范围的宽度重叠？
    
    如果是，重新开始
    
    随机坐标[1]+您的
    的高度是否与
    位置数组[i][1]+您的
    范围的高度重叠？
    
    如果是，重新开始
    
    

  • 如果未检测到碰撞，将

    随机坐标对推到
    位置数组上
    ，应用css，继续下一个
    项目

---

不要为同一个问题添加多个问题。为什么不改进？或者我如何使用固定位置进行改进？？？不，也不是css问题。脚本将li项设置在不同位置。但是div是重叠的。我如何修复此脚本。我没有重叠。或者我如何修复此脚本。使用固定位置？

\parent\u picture1{position:relative；}#parent_picture1 div{position:absolue；}

我的意思是这样的……重叠这是css问题，不是javascript，不管元素在html上的什么位置，你都可以用css更改它的位置和深度。如果你有音调，就使用z-index，这不是解决方案。看这里：@MikeVierwind SO不是“为我编写此代码”网站。我的示例已经相当详细，并且很容易翻译成代码。