元素在父级div中的随机位置

Question

我有一些浮动的随机元素在父级

内，它们的左右位置不断变化。如何在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()))
  });
});

例子： https://jsfiddle.net/iahmadraza/u5y1zthv/ 谢谢。

- ahmad.ideveloper

---

你必须移除元素本身的宽度/高度。 left: ((Math.random()($('.main').width()-$(this).width()))), top: ((Math.random()($('.main').height()-$(this).height()))) - Roy Bogado

使用 min = 0 和 max = (main.width - box.width) 的函数 function getRnd(min, max)。 - Andreas

Answer 1

.box元素的高度和宽度都是固定的100px。因此，为了达到您所需要的效果，只需从可能的随机值最大值中移除该维度即可：

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

更新版JSFiddle

- Rory McCrossan

---

我怎样设置它们不重叠？ - Awais Ayub

在随机生成位置后执行一些碰撞检测。如果检测到碰撞，则生成一个新的位置并重复此过程。 - Rory McCrossan