Добавление картинок по часовой стрелке
Картинки добавляются построчно, но нам нужно следить, чтобы картинки добавлялись по часовой стрелке и прижимались к краю блока с отступом 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>