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="Картинка">';
  }
}