БЛОГ НА HUSL


Event click listener?

Автор вопроса: slobodianiukvitali

Есть 100 элементов с блоками.
Необходимо показать на странице первые 10 блоков.
При повторном клике на кнопку, показывать следующие 10 блоков.

var box = document.querySelectorAll('.box');
var btn = document.getElementsByTagName('button');
console.log(box);

btn = addEventListener("click", function() {
  box.slice(0, 9);

})
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 100%;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Show 10</button>

https://codepen.io/vitalikdark/pen/vYOXNvW


Источник

Ответы (5 шт):

Автор решения: Denis640Kb

Codepen я смотрел.
Вот только попытки Ваши закончились на box.slice(0,9)
Это потом Вы хоть что-то добавили.
Так как Grundy сделал мне выговор, который мы ещё обсудим, решил добавить ответ. 

    window.onload = function () {
        var box=document.getElementsByClassName('box');
        var btn=document.getElementById('button');
        for (let i=10;i<box.length;i++) {
            box[i].style.display = "none";
        }

        var countD = 10;
        btn.addEventListener("click", function() {
            var box=document.getElementsByClassName('box');
            countD += 10;
            if (countD <= box.length){
                for(let i=0;i<countD;i++){
                    box[i].style.display = "block";
                }
            }

        })
    }
    body {
        background: blue;
    }
    .wrapper-boxes {
        display: flex;
        text-align: center;
        flex-direction: row;
        flex-wrap: wrap;
        width: 79%;
    }
    .box {
        margin: 5px;
        width: 100px;
        height: 100px;
        background-color: orange;
        border-radius: 3px;
    }
    button {
        width: 78%;
        line-height: 40px;
        background-color: orange;
        border: 4px solid #fff;
        color: #fff;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
<div class="wrapper-boxes">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<button id="button">Show 10</button>

→ Ссылка
Автор решения: Sevastopol'

Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:

Решение на JavaScript(jQuery). 100 элементов

$(document).ready(function() {
  var list = $(".wrapper-boxes .box");
  var numToShow = 10; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
  });
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  counter-reset: albumList;
}

.box {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 550px;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

.box:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Показать ещё 10</button>

Другое количество элементов (не кратное десяти)

$(document).ready(function() {
  var list = $(".wrapper-boxes .box");
  var numToShow = 10; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
  });
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  counter-reset: albumList;
}

.box {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 550px;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

.box:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Показать ещё 10</button>

Решение на нативном JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const limit = 10;
  const nextOpen = (wrapper, button) => {
    const boxs = wrapper.querySelectorAll(".box"),
      len = boxs.length - 2,
      endBox = wrapper.querySelector(".nextstop"),
      index = [...boxs].indexOf(endBox) + limit;
    if (endBox) endBox.classList.remove("nextstop");
    if (index < len) boxs[index].classList.add("nextstop");
    else button.remove()
  }
  document.querySelectorAll(".wrapper-boxes").forEach(wrapper => {
    const button = wrapper.nextElementSibling;
    button.addEventListener("click", nextOpen.bind(null, wrapper, button));
    nextOpen(wrapper, button);
  })
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  counter-reset: albumList;
}

.box {
  position: relative;
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: orange;
  border-radius: 3px;
}

button {
  width: 550px;
  line-height: 40px;
  background-color: orange;
  border: 4px solid #fff;
  color: #fff;
}

.box:after {
  counter-increment: albumList;
  content: counter(albumList);
  position: absolute;
  top: 10%;
  left: 10%;
  padding: 4% 7%;
  border-radius: 5%;
  border: 1px solid lightgray;
  text-align: center;
  background-color: white;
  font-size: 2vw;
  font-weight: bold;
  font-family: monospace;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset;
}

.box.nextstop~.box {
  display: none;
}
<div class="wrapper-boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button>Показать ещё 10</button>

→ Ссылка
Автор решения: OPTIMUS PRIME

Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать класс)

document.querySelector('button').addEventListener('click', function() {
  let showPerClick = 3;

  let hidden = this.parentNode.querySelectorAll('.box.hidden');
  let limit = Math.min(showPerClick, hidden.length);
  for (let i = 0; i < limit; i++) {
    hidden[i].classList.remove('hidden');
  }
});
.wrapper-boxes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.box {
  margin: 1px;
  width: 20px;
  height: 20px;
  background-color: orange;
}

.box.hidden {
  display: none;
}
<div><!-- какой-нибудь общий родитель для кнопки и блоков -->
  <button>Show 3</button>
  <hr>
  <div class="wrapper-boxes">
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div><div class="box hidden"></div>
    <div class="box hidden"></div><div class="box hidden"></div>
  </div>
</div>

→ Ссылка
Автор решения: Victor VosMottor thanks Monica

  • codepen 1 

    jQuery(document).ready(function($){
  $(".show-more-btn").click(function(e){
    $(".show-more-item:hidden").slice(0,3).fadeIn();
    if ($(".show-more-item:hidden").length < 1) $(this).fadeOut();
  })
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-more-item">blah</div>
<div class="show-more-item">blah</div>
<div class="show-more-item">blah</div>
<div class="show-more-item">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-item" style="display: none;">blah</div>
<div class="show-more-btn">Load More</div>

  • codepen 2 

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #e9ecef;
}

h3 {
  background: #1C1D1F;
  color: white;
  width: 80%;
  text-align: center;
  margin: 15px auto;
  padding: 10px;
}

ul {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  list-style-type: none;
  background: white;
}

li {
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #e9ecef;
}

ul a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: black;
  padding-left: 10px;
  position: relative;
  transition: background .3s;
}

ul a:after {
  content: '⇢';
  position: absolute;
  right: 10px;
}

ul a:hover {
  background: #cdcbc4;
}
/* CHECKBOX CONTAINER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.container {
  position: relative;
  height: auto;
  border-top: 0;
}

[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

label {
  background: #e4e3df;
  display: block;
  width: 100%;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
  transition: top .45s cubic-bezier(.44, .99, .48, 1);
}
/*
 * use the rule below for testing purposes
 * label:hover {
 *    background: yellow;
 *  }
 */

label:before,
label:after {
  position: absolute;
}

label:before {
  content: 'More';
  left: 10px;
}

label:after {
  content: '⇣●';
  right: 10px;
  -webkit-animation: sudo .85s linear infinite alternate;
  animation: sudo .85s linear infinite alternate;
}

@keyframes sudo {
  from {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  to {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }
}

input[type="checkbox"] ~ ul {
  width: 100%;
  overflow: hidden;
  max-height: 0;
  transition: max-height .45s cubic-bezier(.44, .99, .48, 1);
}
/* CHECKED STATE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

[type="checkbox"]:checked ~ ul {
  /**
   * the value of the `max-height` property specifies the transition speed
   * set a very big value (e.g. 9999px) to see the difference
   */
  
  max-height: 300px;
}

[type="checkbox"]:checked + label {
  top: 100%;
}

[type="checkbox"]:checked + label:before {
  content: 'Less';
}

[type="checkbox"]:checked + label:after {
  content: '⇡●';
}

ul li:last-child {
  margin-bottom: 50px;
}
    <h3>Pure CSS "Show More/Less" functionality with Transitions<br>(slideToggle effect with no JavaScript).</h3>

<ul>
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li class="container">
    <input type="checkbox" id="check_id">
    <label for="check_id"></label>
    <ul>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
      <li><a href="#">Seven</a></li>
      <li><a href="#">Eight</a></li>
      <li><a href="#">Nine</a></li>
      <li><a href="#">Ten</a></li>
    </ul>
  </li>
</ul>

→ Ссылка
Автор решения: ws17

Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.

Для фото до и после, используется скрипт twentytwenty.

Таким способом можно показывать работы, до и после, ну и для другого применить.

 //подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку
 $(window).on('load', function() {
    initTwenty();
  });

  // Фото, до и после
  function initTwenty() {
    $(".twentytwenty").twentytwenty({
      no_overlay: false, // Не показывать наложение было, стало, true скрыть
      // Перемещать ползунок при наведении курсора мыши
      move_slider_on_hover: false, 
      // Разрешить пользователю проводить пальцем в любом месте
      // изображения для управления движением ползунка.
      move_with_handle_only: true, 
      before_label: 'До',
      after_label: 'После'
    });
  }

  $(document).ready(function() {
    var list = $(".gggggggg .twentytwenty");
    var numToShow = 6; //сколько показывать элементов
    var button = $("button");
    var numInList = list.length;
    list.hide();
    if (numInList > numToShow) {
      button.show();
    }
    list.slice(0, numToShow).show();
    button.click(function() {
      var showing = list.filter(':visible').length;
      list.slice(showing - 1, showing + numToShow).fadeIn();
      var nowShowing = list.filter(':visible').length;
      if (nowShowing >= numInList) {
        button.hide();
      }
      initTwenty();
    });
  });
.prfota {
  margin: 0 0 -40px -40px;
}
.twentytwenty-wrapper{
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(33.333333% - 0px);
  flex: 0 0 calc(33.333333% - 0px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.twentytwenty-container{
margin: 0 0 40px 40px;
}

.gggggggg button {
  width: 280px;
  height: 60px;
  line-height: 60px;
  border: 1px solid #CB002B;
  background: #fff;
  font-weight: 600;
  text-align: center;
  color: #282725;
  text-transform: uppercase;
  border-radius: 90px;
  margin-top: 40px;
}
.gggggggg button:hover {
  background: #282725;
  border: 1px solid #282725;
  color: #fff;
}

.wr {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.prfota {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://test.vl-it.ru/media/twentytwenty/css/twentytwenty.css">
 <script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.event.move.js"></script>
 <script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.twentytwenty.js"></script>
 
 <div class="gggggggg">
   <div class="prfota wr prfot">
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
     <div class="twentytwenty">
       <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
       <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
     </div>
   </div>

   <button>Показать еще</button>
 </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.