JSFiddle - React, Tailwind, and code Playground

by stic_k

HTML

<div class="list-img">
		<img src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Images-Cloud-128.png" alt="">
		<img src="https://cdn0.iconfinder.com/data/icons/Pry_Black_png/128/Pictures_Black.png" alt="">
		<img src="https://cdn3.iconfinder.com/data/icons/social-network-2/512/650868-devianart-128.png" alt="">
		<img src="https://cdn2.iconfinder.com/data/icons/blackblue/128/preview.png" alt="">
		
</div>

	<div class="out"></div>

	<button class="btn">Показать ещё</button>

CSS

.list-img {
	display: none;
}

.out {
	display: flex;
	flex-wrap: wrap;
  max-width: 250px;
  width: 100%;
}

.outImg {
	margin: 2px 5px;
}

.outImg img {
	width: 50px;
	height: 50px;
}

.btn {
  color: #000;
  background: #aaa;
}

JavaScript

let list = document.querySelectorAll('.list-img img');
let out = document.querySelector('.out'); 

document.querySelector('.btn').onclick = function () {
	masImg();
}

function masImg () {
	for(let i = 0; i < list.length; i++){
		let arrImg = list[i].getAttribute('src');
		let div = document.createElement('div');
		div.className = 'outImg';
		out.insertBefore(div, out.firstChild);
		div.innerHTML = '<img src="'+ arrImg + '" alt="Картинка">';
	}
}