Добавление картинок по часовой стрелке

Картинки добавляются построчно, но нам нужно следить, чтобы картинки добавлялись по часовой стрелке и прижимались к краю блока с отступом 10px.

let collage = document.getElementById('collage');

function getRandomImage() {
  fetch('https://dog.ceo/api/breeds/image/random')
    .then(response => response.json())
    .then(data => {
      let img = new Image();
      img.onload = () => {
        let maxWidth = 200;
        let ratio = maxWidth / img.width;
        let newWidth = Math.min(maxWidth, img.width);
        let newHeight = img.height * ratio;
        img.width = newWidth;
        img.height = newHeight;

        if (collage.childElementCount >= 10) {
          collage.removeChild(collage.firstElementChild);
        }
        collage.appendChild(img);
      };
      img.src = data.message;
    });
}

setInterval(getRandomImage, 1000);
#collage {
  width: 35%;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 10px;
}

#collage img {
  max-width: calc(50% - 20px);
  max-height: calc(50vh - 20px);
  margin: 5px;
  object-fit: cover;
}
<div id="collage"></div>


Ответы (0 шт):