<div class="gallery">
  <!--Сюда будут интерпретироваться картинки-->
</div>

.short_box {
    width: 383px;
    height: 337px;
    background: #ffffff;
  }
  .high_box {
    width: 383px;
  height: 692px;
  background: #ffffff;
  }
.long_box {
    width: 795px;
  height: 337px;
    background: #ffffff;
  }

border: 4px solid #BB70B3;
  z-index: 10;
  margin-top: 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.gallery > div img {
  z-index: -5;
  width: 100%;
  height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Вертикальное и горизонтальное выравнивание */
}

.gallery {
  width: 795px;
  display: table;
  margin: 0 auto;
}

.scroll_to {
  margin: 0 auto;
  padding-top: 30px;
  width: 100%;
  cursor: pointer;
}

@media screen and (max-width: 795px) {
  .gallery {
    width: 595px;
  }
  .short_box {
    width: 283px;
    height: 237px;
    background: #ffffff;
  }
  .high_box {
    width: 283px;
    height: 490px;
    background: #ffffff;
  }
  .long_box {
    width: 595px;
    height: 237px;
    background: #ffffff;
  }
}
@media screen and (max-width: 595px) {
  .gallery {
    width: 100%;
  }
  .gallery > div {
    display: block;
    margin: 0 auto;
    margin-top: 18px;
    float: none!important;
  }
  .long_box {
    width: 100%;
    height: 237px;
  }
}

class ImgComponent {
    constructor(groupImg, srcImg, srcToProject, size = 'short', float = 'left') { // передаем аргументы: группа изображений, ссылка на изображение, ссылка на проект, размер картинки по заранее созданным типам(short, long, high), значение свойства float;
        this.render() //создаем корневой DOM элемент
        this.elem.className = `img_gallery ${size}_box`; // присваиваем классы для картинок, и также класс описывающий его тип
        this.elem.dataset.group = `${groupImg}` // Присваиваем data-атрибут
        this.elem.href = `./articles/${srcToProject}` // Присваиваем ссылку на проект, на который ведет картинка
        this.elem.style.float = float; // Присваиваем свойство float
        this.elem.innerHTML = `
        <img src="img/${srcImg}" alt="gallery_img">
        ` // Вкладываем внутрь элемента картинку
        this.appendElem() // Добавляем элемент на страницу
        this.onClick(); // Добавляем на элемент событие onclick
    }
    render = () => {
        this.elem = document.createElement('div') //создаем метод, создающий корневой DOM элемент нашей картинки.
    }
    appendElem = () => { // Создаем метод, для добавления элемента на страницу
        document.querySelector('.gallery').append(this.elem);
    }
    onClick = () => { // Создаем метод для прослушки события onclick элемента, для перехода по ссылке.
        this.elem.addEventListener('click', () => {
            window.open(this.elem.href);
        })

new ImgComponent(1, 'img_1.jpg', 'article1.html')
new ImgComponent(1, 'img_1.jpg', 'article1.html', 'short', 'right')
new ImgComponent(1, 'img_3.jpg', 'article1.html', 'long', 'right')
new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'left')
new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'right')
new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long')
new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long')
new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long')
new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long')

let groupNum = 1;

let scroll_svg = {
    elem: document.createElement('img'), // Создаем корневой DOM элемент кнопки
    hiddenImg() {  // Создаем метод скрытия для первоначального всех изображений
        let array = document.querySelectorAll('.img_gallery'); // Выделяем все изображения внутри галлереи
        let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`); // выделяем первую группу изображений по атрибута data-group для показа
        for(let i = 0; i < array.length; i++) { // Скрываем все изображения
            array[i].style.display = 'none'
        }
        for(let i = 0; i < arrayShow.length; i++) { // Показ первой группы изображений
            arrayShow[i].style.display = '';
            if(i === arrayShow.length - 1) { // Вставка элементов после первой группе изображений
                arrayShow[i].insertAdjacentElement('afterEnd', this.elem);
            }
        }
    },
    showImg() { // Создаем метод показа следующей группы изображений
        let array = document.querySelectorAll('.img_gallery'); // Выделяем все изображения внутри галлереи
        let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`); // выделяем следующую группу изображений по атрибута data-group для показа
        for(let i = 0; i < arrayShow.length; i++) { // Перебор массива изображений которые нужно показать
            arrayShow[i].style.display = ''; // показываем все изображения из нашего массива
            if(arrayShow[i] !== array[array.length - 1]) { // Проверка - на то является ли группа картинок последней
                arrayShow[i].insertAdjacentElement('afterEnd', this.elem); // Если нет, то вставляем кнопку после следующей группы картинок
            } else {
                this.elem.style.display = 'none'; // Если условие не проходит, скрываем кнопку со страницы
            }
        }
    },
    render() {
        this.elem.src = './img/scroll.svg'; // Прописываем путь до кнопки показа
        this.elem.className = 'scroll_to'; // Присваивает класс, для последующего приминения CSS стилей
        this.hiddenImg(); // Скрытие всех изображений на странице, кроме первой группы
        this.elem.addEventListener('click', () => { // Вешаем событие на кнопку - показ группы изображений и увелечение переменной хранящей в себе прогресс показа изображений
            groupNum++;
            this.showImg();
        })
    }
}

scroll_svg.render()

let groupNum = 1;
class ImgComponent {
    constructor(groupImg, srcImg, srcToProject, size = 'short', float = 'left') {
        this.render();
        this.elem.className = `img_gallery ${size}_box`;
        this.elem.dataset.group = `${groupImg}`
        this.elem.href = `./articles/${srcToProject}`
        this.elem.style.float = float;
        this.elem.innerHTML = `
        <img src="img/${srcImg}" alt="gallery_img">
        `
        this.appendElem();
        this.onClick();
    }
    render = () => {
        this.elem = document.createElement('div');
    }
    appendElem = () => {
        document.querySelector('.gallery').append(this.elem);
    }
    onClick = () => {
        this.elem.addEventListener('click', () => {
            window.open(this.elem.href);
        })
    }
}
new ImgComponent(1, 'img_1.jpg', 'article1.html')
new ImgComponent(1, 'img_1.jpg', 'article1.html', 'short', 'right')
new ImgComponent(1, 'img_3.jpg', 'article1.html', 'long', 'right')
new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'left')
new ImgComponent(1, 'img_2.jpg', 'article1.html', 'high', 'right')
new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long')
new ImgComponent(2, 'img_3.jpg', 'article1.html', 'long')
new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long')
new ImgComponent(3, 'img_3.jpg', 'article1.html', 'long')
let scroll_svg = {
    elem: document.createElement('img'),
    hiddenImg() {
        let array = document.querySelectorAll('.img_gallery');
        let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`);
        for(let i = 0; i < array.length; i++) {
            array[i].style.display = 'none'
        }
        for(let i = 0; i < arrayShow.length; i++) {
            arrayShow[i].style.display = '';
            if(i === arrayShow.length - 1) {
                arrayShow[i].insertAdjacentElement('afterEnd', this.elem);
            }
        }
    },
    showImg() {
        let array = document.querySelectorAll('.img_gallery');
        let arrayShow = document.querySelectorAll(`.img_gallery[data-group="${groupNum}"]`);
        for(let i = 0; i < arrayShow.length; i++) {
            arrayShow[i].style.display = '';
            if(arrayShow[i] !== array[array.length - 1]) {
                arrayShow[i].insertAdjacentElement('afterEnd', this.elem);
            } else {
                this.elem.style.display = 'none';
            }
        }
    },
    render() {
        this.elem.src = './img/scroll.svg';
        this.elem.className = 'scroll_to';
        this.hiddenImg();
        this.elem.addEventListener('click', () => {
            groupNum++;
            this.showImg();
        })
    }
}
scroll_svg.render()