父div

Question

我在DIV中有浮动RANDOM元素，在父<div class="main"></div>内改变LEFT和TOP位置。如何在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())
});

Updated fiddle