Javascript 父div中元素的随机位置

我在DIV中有浮动的随机元素，在父级

中有不同的左上位置。如何在javascript/jQuery中以数学方式计算和设置左侧和顶部位置，以便任何随机元素都不会超出父级定义的边界

HTML:

<div class="main"></div>

Javascript:

for (var i = 0; i < 5; i++) {
  $('.main').append('<div class="box"></div>');
}
$( '.box' ).each(function( index ) {
  $(this).css({
    left : ((Math.random() * $('.main').width())),
    top : ((Math.random() * $('.main').height()))
  });
});

for（变量i=0；i<5；i++）{
$（'.main'）。追加（''）；
}
$（'.box'）。每个（函数（索引）{
$（this.css）({
左：（（Math.random（）*$（'.main'）.width（）），
顶部：（（Math.random（）*$（'.main'）.height（））
});
});

例如：

---

谢谢

这个

.box

元素的高度和宽度固定在

100px

上，所以要实现您所需要的，只需从可能的最大随机值中删除该尺寸：

$(this).css({
  left: Math.random() * ($('.main').width() - $(this).width()),
  top: Math.random() * ($('.main').height() - $(this).height())
});

---

必须删除元素本身的宽度/高度。左：（$（'.main'）.width（）-$（this.width（））），顶：（（Math.random（）*（$（'.main'）.height（）-$（this.height（）））和

min=0

和

max=（main.width-box.width）

如何设置它们不重叠？在随机生成位置后执行一些碰撞检测。如果检测到碰撞，则生成新位置并重复。