Question

我的问题如下：

我有三个不同类别的div，它们位于更大的容器div中刷新页面后，有没有办法在父div中给它们一个随机位置？使用下面的代码，我几乎可以实现这一点，但有时一些div只是掉在主div之外任何帮助将不胜感激。

＆＃13;

$(".img-1, .img-2, .img-3").each(function(index) {
  $(this).css({
    left: Math.random() * ($(".main").width() - $(this).width()),
    top: Math.random() * ($(".main").height() - $(this).height())
  });
});

＆＃13;

.main {
  width: 512px;
  height: 512px;
  background-color: yellow;
}

.img-1 {
  width: 128px;
  height: 128px;
  background-color: blue;
}

.img-2 {
  width: 64px;
  height: 64px;
  background-color: green;
}

.img-3 {
  width: 32px;
  height: 32px;
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="img-1"></div>
  <div class="img-2"></div>
  <div class="img-3"></div>
</div>

＆＃13;

Answer 1

您需要为position: absolute; DIV指定.img-X，以便它们的位置相对于最近的位置祖先是绝对的。然后，您必须对position: relative;使用.main，以便符合该条件。

$(".img-1, .img-2, .img-3").each(function(index) {
  $(this).css({
    left: Math.random() * ($(".main").width() - $(this).width()),
    top: Math.random() * ($(".main").height() - $(this).height())
  });
});

.main {
  width: 512px;
  height: 512px;
  background-color: yellow;
  margin-top: 25px;
  position: relative;
}

.img-1 {
  width: 128px;
  height: 128px;
  background-color: blue;
  color: white;
  position: absolute;
}

.img-2 {
  width: 64px;
  height: 64px;
  background-color: green;
  color: white;
  position: absolute;
}

.img-3 {
  width: 32px;
  height: 32px;
  background-color: red;
  color: white;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="img-1">1</div>
  <div class="img-2">2</div>
  <div class="img-3">3</div>
</div>

jQuery - 父div中随机定位的div

1 个答案: