Javascript 使随机放置的div不相互重叠，也不与边栏重叠

我正在制作一个车间页面，其中不同的产品是div元素，其位置随页面加载而随机化，使用以下jQuery：

var docHeight = $(document).height(),
docWidth = $(document).width(),
$div = $('#div'),
divWidth = $div.width(),
divHeight = $div.height(),
heightMax = docHeight - divHeight,
widthMax = docWidth - divWidth;

$div.css ({
    left: Math.floor( Math.random() * widthMax ),
    top: Math.floor( Math.random() * heightMax )
});

---

我在页面的左侧和底部也有导航条，divs“spawn”在固定的底部条后面，允许滚动，没有重叠，所以没有问题

---

我的两个问题是：

1）div重叠并相互阻碍。我认为解决方案是将先前生成的div的位置和大小分解为下一个div的生成，但我不知道如何将其转化为代码。

[已解决]2）div偶尔会在左侧导航条的顶部生成，重叠并阻塞链接。我认为解决方案是在docWidth=$（document.width（）计算中为div指定一个容器，或者排除导航栏的宽度，但是再一次，我对jQuery太不熟悉，无法解决这个问题。

我让这个JSFIDLE反复运行代码来演示这个问题。导航栏显示在exmaple的顶部，但在站点的左侧是固定的。

感谢您的帮助！

编辑：我通过计算容器的宽度解决了问题二：

var $div = $('.navbar-fixed-left'),
navWidth = $div.width();

从widthMax中减去它，同时将其添加到最终的左计算中，如下所示：

widthMax = docWidth - divWidth - navWidth;
left: Math.floor( Math.random() * widthMax + navWidth),

基本上是将繁殖区域移动导航栏的宽度。

对于问题2：

您可以在tee类上使用css样式，这样您就有了一个上边距。不要再重复菜单了

margin-top: 50px;

---

若你们不想让它们重叠，你们可以去掉绝对位置，在继承的位置：静态中添加一个float:left，你们将不会得到任何重叠。将要随机化的属性从“顶部”和“左侧”更改为“顶部边距”和“左侧边距”。如果你需要一个z-索引，你也可以使用position:relative，但根据具体情况，你可以得到一些重叠

如果你需要随机顺序和/或你只是不想花时间让它看起来像你想要的那样，而没有绝对位置；您可以一次定义所有变量，并相互检查它们，或者更好地在循环中检查它们，可能还有数组中的变量。检查内容如下所示：

var docHeight = $(document).height(),
  docWidth = $(document).width(),
  divWidth = $('#whiteTee').width(),
  divWidth2 = $('#blackTee').width(),
  divHeight = $('#whiteTee').height(),
  heightMax = docHeight - divHeight,
  widthMax = docWidth - divWidth,
  widthMax2 = docWidth - divWidth2,
  randWidth = Math.floor(Math.random() * widthMax),
  randWidth2 = Math.floor(Math.random() * widthMax2),
  checkFunction1;

checkFunction1 = function(randWidth, randWidth2){
    if(randWidth2 < randWidth){ /*THIS IS THE TRICKY PART, finding what in 
    your requirements for the if will be, you'll probably more likely need to 
    add your width in with the random number, and check that the second width 
    and second random number doesn't land it in the area of the other 
    container, going to get really tricky when you need to check all of them 
    against eachother. I mean you can keep copy pasting all your if 
    requirements, it will just be alot of things to check against.*/
       randWidth2 = Math.floor(Math.random() * widthMax2);
       return randWidth2;
    }
    else{
       randWidth2 = checkFunction1(randWidth, randWidth2);
       return randWidth2;
    }
}
randWidth2 = checkFunction1(randWidth, randWidth2);

$('#whiteTee').css({
  left: randWidth)
});

$('#blackTee').css({
  left: randWidth2),
});

var docHeight=$（document）.height（），
docWidth=$（文档）.width（），
divWidth=$（'#whitee'）.width（），
divWidth2=$（'#blackTee'）.width（），
divHeight=$（'#whitee'）.height（），
heightMax=docHeight-divHeight，
widthMax=docWidth-divWidth，
widthMax2=docWidth-divWidth2，
randWidth=Math.floor（Math.random（）*widthMax），
randWidth2=Math.floor（Math.random（）*widthMax2），
检查功能1；
checkFunction1=函数（随机宽度，随机宽度2）{
如果（randWidth2

按照您想要的方式实现这一点可能需要大量的javascript或CSS工作，而在CSS中完成所有繁重的工作通常是一个更好的主意

另外，在使用jquery时，不要在变量中使用$

此外，您继续重新定义docHeight和docWidth，它们看起来应该只定义一次。所有这些var声明都在同一个作用域级别，所以您只需要在第一个声明中使用var，但我的建议是，声明它们并同时检查它们，然后在最后执行所有$（selector）.css（css对象分配）的操作，这样就可以避免这种情况。但为了您将来的编码，在第一个变量之后，所有这些变量看起来都是不必要的，因为它们都是相同的变量

我没有测试这一点，也没有为你解决问题，但希望这能给你一个方向的想法

---

哦，我要澄清的是，if语句块在您想要的区域中时，else语句块在重叠时，需要重新分配。

因此，您希望在不重叠的页面上随机放置div。。所以你想要metro风格的div？这不是你想要的，但是请看一看，如果你还没有：）