将div定位随机化。（在本部分中保留一部分）

Question

我正在个人鉴定部分，在该区域中随机放置一个div中约有7张图像（在本示例中为红色div），我有一个div，其中显示来自图像中人物的评论。

我尝试实现布局，但这纯粹是静态的。我希望将这些图像动态地放置在该部分中，但在个人鉴定div上或下方除外（在本例中为蓝色div。

我希望div的放置和定位是动态的，因为如果我添加7个以上的图像（在本例中为div），则需要为每个图像静态地写入位置。

励志图片

以下是我尝试过的代码。

.images {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 700px;
  margin: 0 auto;
}

a.img {
  content: '';
  width: 40px;
  height: 40px;
  display: block;
  background: red;
}

.content {
  width: 400px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%)
}

.img {
  position: absolute;
}

.img1 {
  left: -20%;
  top: 75px;
}

.img2 {
  top: 150px;
  left: -5%;
}

.img3 {
  top: 20px;
  left: 5%;
}

.img4 {
  top: 0;
  left: 25%;
}

.img5 {
  top: 20px;
  right: 350px;
}

.img6 {
  top: 60px;
  right: 250px;
}

.img7 {
  top: 30px;
  right: 150px;
}

<div class="images">
    <a href="#" class="img img1" data-id="review1"></a>
    <a href="#" class="img img2" data-id="review2"></a>
    <a href="#" class="img img3" data-id="review3"></a>
    <a href="#" class="img img4" data-id="review4"></a>
    <a href="#" class="img img5" data-id="review5"></a>
    <a href="#" class="img img6" data-id="review6"></a>
    <a href="#" class="img img7" data-id="review7"></a>
</div>
<div class="content"></div>

Answer 1

要将图像放置在红色div上，您可以使用.img遍历类为.each()的所有图像，并为每个元素设置图像。

我假设图像名称是所有锚点（data-id）标记的<a>属性，因此，您可以使用.data('id')获得图像名称。现在您有了图像名称，您可以“构建” DOM元素以放置在红色框中，然后使用.html()将其添加到红色框中（锚标记）。

请在下面查看一个有效的示例（该示例中的图像尚不存在，因此将无法使用）：

$('.img').each((_, elem) => {
  let img_id = $(elem).data('id');
  let img = `<img style='height: 100%; width: 100%;' src="${img_id}.png" alt='${img_id} image'/>`;
  $(elem).html(img);
});

.images {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 700px;
  margin: 0 auto;
}

a.img {
  content: '';
  width: 40px;
  height: 40px;
  display: block;
  background: red;
}

.content {
  width: 400px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%)
}

.img {
  position: absolute;
}

.img1 {
  left: -20%;
  top: 75px;
}

.img2 {
  top: 150px;
  left: -5%;
}

.img3 {
  top: 20px;
  left: 5%;
}

.img4 {
  top: 0;
  left: 25%;
}

.img5 {
  top: 20px;
  right: 350px;
}

.img6 {
  top: 60px;
  right: 250px;
}

.img7 {
  top: 30px;
  right: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images">
  <a href="#" class="img img1" data-id="review1"></a>
  <a href="#" class="img img2" data-id="review2"></a>
  <a href="#" class="img img3" data-id="review3"></a>
  <a href="#" class="img img4" data-id="review4"></a>
  <a href="#" class="img img5" data-id="review5"></a>
  <a href="#" class="img img6" data-id="review6"></a>
  <a href="#" class="img img7" data-id="review7"></a>
</div>
<div class="content">
</div>