Возможно ли случайное положение изображения из цикла?

Question

Я хочу, чтобы изображение с произвольной позицией считывалось из данных JSON, и я не уверен, что это можно сделать? Это образец того, что я хочу:

Это то, что я пробовал

    <div *ngFor="let item of img"></div
    <div class="col-md-3>img.img</div>
    <div class="col-md-3>img.img</div>
    <div class="col-md-3>img.img</div>
    <div class="col-md-3>img.img</div>

    <div class="col-md-4>img.img</div>
    <div class="col-md-4>img.img</div>
    <div class="col-md-4>img.img</div>

Answer 1

Это не кажется таким случайным, но вы можете расположить изображение таким образом, используя flex box:

const input = document.getElementById('input');
const root = document.getElementById('root');

const renderImages = (q) => {
  const images = Object.keys([...new Array(q)]).map(key => 'https://api.adorable.io/avatars/100/' + key);
  
  root.innerHTML = '';
  
  images.forEach(image => {
    const img = document.createElement('img');
    img.src = image;
    root.appendChild(img);
  })
}

window.addEventListener('DOMContentLoaded', renderImages(9));

input.addEventListener('change', (e) => {
  const q = parseInt(e.target.value);
  renderImages(q);
})

#root {
  width: 100%;
  height: 220px;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: center;
  align-content: flex-start;
}

#root img {
  margin: 5px;
}

#root img:nth-child(3n) {
  margin: 60px 5px;
}

#root img {
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
}

.clip-svg {
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<input id="input" type="number" min="1" step="1" value="9" />
<br /><br /><br />
<div id="root"></div>

Answer 2

Если вы хотели перетасовать теги div изображений изображений, да, это возможно, и вы можете сделать это, используя javascript из jquery

Смотрите здесь: Перемешайте все DIVS с одним и тем же классом