Você pode fazer um container para armazenar as imagens lado a lado
<button>Nova imagem</button>
<div class="container"></div>
usando o css e adicionando display flex ou display grid no container você consegue deixar todas as imagens lado a lado
CSS
img.image {
width: 220px;
box-shadow: rgb(158, 120, 137) 0px 0px 20px 0px;
border-radius: 0.5em;
margin: 15px;
}
div.container {
display: grid;
/* Vai criar 3 colunas de mesmo tamanho, ocupando todo tamanho da tela */
/* grid-template-columns: repeat(3, 1fr); */
/* Caso queira informa um tamanho para a coluna*/
grid-template-columns: repeat(3, 250px);
}
button {
cursor: pointer;
}
E o codigo Javascript para criar novas imagens e adicionar no container
JS:
<script>
// Quando clicar no botão vai chamar a função de nova imagem
document.querySelector('button')
.addEventListener('click', newImage)
const images = [
{ source: "https://i.ibb.co/xC9r03B/0.jpg" },
{ source: "https://i.ibb.co/hD5gs5R/1.jpg" },
]
function newImage() {
// Vai gerar um número aleatorio (random) que vai arredondar (floor)
// E vai fazer uma desestruturação no resultado que vier no array
const { source } = images[Math.floor(Math.random() * images.length)]
// criar um novo elemento de imagem
const img = document.createElement('img')
// Adicionar uma classe na imagem
img.classList = 'image'
img.src = source
// Selecionar a div de container
const container = document.querySelector('div.container')
// Adicionar no container o elemento de imagem
container.appendChild(img)
}
</script>
Caso queria que não repita a imagem você pode adicionar na função newImage
// vai verificar se essa imagem já esta no container, caso estiver vai cancelar a função
if(imgExists(source)) return
E Adicionar a função de verificação
function imgExists(source) {
const imagens = document.querySelectorAll('img.image')
for(let image of imagens) {
if(image.src == source) return true
}
}