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的位置和大小分解为下一个产生的产生，但我不知道如何将其放入代码中。

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

我做了这个jsfiddle https://jsfiddle.net/j1bpt34t/反复运行代码演示了这个问题。导航栏显示在exmaple的顶部，但在站点上固定在左侧。

感谢您的帮助！

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

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

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

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

基本上通过导航栏的宽度来移动生成区域。

Answer 1

如果你不想让它们重叠，你可以摆脱绝对位置并添加一个浮动：左，继承位置：静态你不会得到任何重叠。将您正在随机化的属性从顶部和左侧更改为margin-top和margin-left。如果你需要一个z-index，你也可以玩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),
});

准确地按照你想要的方式获得这个可能在javascript中有很多工作，或者在CSS中有很多工作，而且通常你可以在CSS中完成所有繁重的工作。

在使用jquery时，也不要尝试自己的阅读（或者至少对那些回答堆栈溢出的人来说）不要在变量中使用$。

此外，您继续重新设计docHeight和docWidth，看起来它们应该真正定义一次。并且所有这些var声明都在相同的范围级别，所以你只需要第一个中的var，但我建议的意思是声明它们并立即检查它们然后再做所有的$（选择器）.css （css对象赋值）最后的东西，所以它会摆脱它。但是仅仅为了你未来的编码，所有这些变量在第一个变量之后看起来是不必要的，因为它们都是相同的变量。

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

哦，并且澄清一下，if语句块就像它在你想要它的区域一样，else块就是它重叠时需要重新分配。

Answer 2

问题nr。 2：

你可以在你的发球台上使用css风格，这样你就有了一个上边距。不再重叠菜单

margin-top: 50px;

使随机定位的div彼此不重叠并与侧边栏重叠

2 个答案: