父div中元素的随机位置

Question

我在DIV中有浮动RANDOM元素,在父级内部改变LEFT和TOP位置<div class="main"></div>.如何在javascript/jQuery中以数学方式计算和设置LEFT和TOP位置,这样任何随机元素都不会超出边界定义的父元素

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/

谢谢

Answer 1

该.box元件固定在100px高度和宽度,这样就实现你只需要从可能的随机值最大删除尺寸是什么:

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

更新了小提琴