Html 图像的随机位置不应与div内的其他图像重叠

我在一个角度分量中有一个div，它有一个ngFor图像。这些图像通过一个简单的函数动态地放置在这个div中，该函数运行并返回顶部位置和左侧位置的随机数

问题很多时候，图像没有利用整个可用空间，最终与上一张图像重叠。我不希望图像与任何其他图像重叠

我所尝试的。正如您所注意到的，randomPosition（）函数根据以前使用的位置的对象列表进行检查。这有助于使图像处于相同的精确位置，但重叠仍然存在。我还试着用谷歌搜索一个库，它可以很容易地提供这样一个功能来“分散”图像，还有一些更好的方法来随机生成顶部和左侧位置，但结果是空的

每个图像都设置为100px×100px，填充为10px。代码如下

project.component.html

<div #imageContainer class="card card-body image-container">
     <img *ngFor="let image of products" class="product-gravatar" [src]="image.src" [style]="image.style"/>
</div>

project.component.css

@ViewChild('imageContainer') imageContainer: ElementRef;

arrangeImages() {
    let used_V = [];
    let used_H = [];
    for (var i = this.products.length - 1; i >= 0; i--) {

       let containerHeight = this.imageContainer.nativeElement.offsetHeight;
       let containerWidth = this.imageContainer.nativeElement.offsetWidth;

       let imageWidth = 100;
       let imageHeight = 100;

       let availableSpace_V = containerHeight - imageHeight;
       let availableSpace_H = containerWidth - imageWidth;

       let random_V = randomPosition(availableSpace_V, used_V);
       let random_H = randomPosition(availableSpace_H, used_H);

       used_V.push(random_V);
       used_H.push(random_H);

       this.products[i]['style'] = 'top:'+random_V+'px; left:'+random_H+'px;';
   }
}

function randomPosition(availableSpace, used) {
  let generatedNumber: number;
  let randomizer = () => generatedNumber = Math.round(Math.random() * availableSpace);
  let check = () => used.find(i => i === generatedNumber);
  randomizer();

  if(check()) {
   randomizer();
  } else {
   return generatedNumber;
  }
}

.image-container {
    max-height: 40vh;
    min-height: 40vh;
    overflow: hidden;
}

.image-container .product-gravatar {
    position: absolute;
    background-color: #F3715C;
    border-radius: 50%;
    padding: 10px;
    width: 100px;
    height: 100px;
}