我想随机将图像放在父div的边界

Posted 2021-04-10

我有一些代码显示一个或两个随机图像形成一个列表，并将其放在div中的随机位置。有时图像出现在div之外。如何才能将图像包含在父div的边界中？

当前代码：

$('.draggable').each(function(i, el) {
  var tLeft = Math.floor(Math.random() * 99) + 1 + '%',
    tTop = Math.floor(Math.random() * 99) + 1 + '%';
  $(el).css({
    'left': tLeft,
    'top': tTop
  });
});

.draggable {
  position: absolute;
}

.top-images {
  position: relative;
  width: 700px;
  height: 80vh;
  margin: 0 auto;
}

.top-images img {
  width: 300px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-images">
  <img class="draggable" src="http://serwer1858479.home.pl/autoinstalator/wordpress/wp-content/themes/cincio/img/main/main_page(9).jpg">
  <img class="draggable" src="http://serwer1858479.home.pl/autoinstalator/wordpress/wp-content/themes/cincio/img/main/main_page(3).jpg">
</div>

答案

在js中获取每个图像的宽度和高度...获取父级的宽度和高度..将图像随机放置在0,0到（parent_width-img_width + 1）之间，（parent_height-img_height + 1）

注意：对js是新的，因此确切的代码可能略有不同，但一般概念是准确的

在数学函数中替换它

var tLeft = Math.floor(Math.random() * ($(el).parent().width()-$(el).clientwidth+1)) + 'px',
    tTop  = Math.floor(Math.random() * ($(el).parent().height()-$(el).clientheight+1)) + 'px';

如果大小是自动的，它可能会弄乱数值

编辑1：代码中的错误

另一答案

由于300px（图像宽度）是700的43％（图像出现的div的宽度），因此需要将tleft限制为57（100-43）。但tTop有点不同，因为你使用了像素。试试这个 ：

var maxTop = $('.top-images').first().height() - $(this).height(),
tLeft = Math.floor(Math.random() * 57) + 1 + '%',
tTop = Math.floor(Math.random() * maxTop) + 'px';