代码之家 › 专栏 › 技术社区 › Mohammed Wahed Khan Michael

随机化div定位(保留部分区域)

css html jquery

-1

Mohammed Wahed Khan Michael · 技术社区 · 6 年前

我正在做一个推荐部分,其中我有大约7个图像(在这个例子中是红色div)在一个div随机放置在它下面,我有一个div显示来自图像中的人的评论。

我试着实现布局,但它完全是静态的。我希望这些图像动态地放在这个部分中,除了在推荐div上或下面(在本例中是blue 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>

1 回复 | 直到 6 年前

Nick Parsons Felix Kling 6 年前

要将图像放在红色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>