javascript - 使随机定位的 div 彼此和侧边栏不重叠

Question

我正在制作一个商店页面，其中不同的产品是 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 )
});

---

我在页面左侧和底部也有 boostrap 导航栏，div 在固定底部栏后面“生成”并允许滚动而不重叠，所以那里没有问题。

---

我的两个问题是:

1) div 重叠并互相遮挡。我认为解决方案是将先前生成的 div 的位置和大小考虑到下一个生成的 div 中，但我不知道如何将其放入代码中。

[已解决] 2) div 偶尔会出现在左侧导航栏的顶部，与它重叠并阻碍链接。我认为解决方案是在 docWidth = $(document).width() 计算中为 div 指定一个容器以在其中生成或排除导航栏的宽度，但再一次，我我对 jQuery 太陌生，无法解决这个问题。

我制作了这个 jsfiddle https://jsfiddle.net/j1bpt34t/重复运行代码演示了问题。导航栏显示在示例的顶部，但在网站上它固定在左侧。

感谢您的帮助!

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

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

然后从 widthMax 中减去它，同时将它添加到最后的左侧计算中，如下所示:

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

本质上是将生成区域移动导航栏的宽度。

Answer 1

如果您不希望它们重叠，您可以摆脱绝对位置并添加一个 float :左，在继承的位置:静态你不会得到任何重叠。将要随机化的属性从 top 和 left 更改为 margin-top 和 margin-left。你也可以玩 position: relative 如果你需要一个 z-index 但你可以在那里得到一些重叠取决于。

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

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),
});

完全按照您想要的方式进行操作可能需要大量的 javascript 工作或大量的 CSS 工作，通常最好在 CSS 中完成所有繁重的工作。

另外，为了您自己的阅读(或者至少对于那些回答您的堆栈溢出的人)，在使用 jquery 时不要在您的变量中使用 $。

此外，您不断重新定义 docHeight 和 docWidth，它们看起来应该真正定义一次。所有这些 var 声明都在同一范围级别，因此您只需要第一个中的 var，但我的建议是声明它们并立即检查它们，然后执行所有 $(selector).css (css object assignment) 最后的东西，所以它会摆脱它。但是为了您以后的编码，所有这些变量在第一个变量之后看起来都是不必要的，因为它们都是相同的变量。

我没有对此进行测试，也没有实际为您解决您的问题，但希望这能让您了解需要采取的方向。

哦，澄清一下，我的 if 语句 block 是在它位于您想要的区域时，else block 是在它重叠并需要重新分配时。