Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2019, 06:51
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Есть-ли такая фукция в js
Вопрос в следующем.
Есть блоки миниатюр
<div class="container_image"></div>

Необходимо сделать так чтоб если количество блоков превышает 90 шт то остальные скрылись и погрузилась кнопка показать еще. Желательно простое решение.
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2019, 09:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Stas1985,
https://javascript.ru/forum/events/6...tml#post448151

https://javascript.ru/forum/jquery/3...tml#post255632
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2019, 11:45
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Это немного не то. Вот пример страницы _https://update.lik-astana.kz/bagetnaya-masterskaya/oformlenie-v-baget/izgotovlenie-ram-dlya-kartin-detail.html тут большое количество миниатюр. Думал что то с погрузкой сделать. Может вы что то посоветуете?
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2019, 12:58
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<style>
.container_image {display:none;}
#more {display:none;}
</style>
<div class="container_image">1</div>
<div class="container_image">2</div>
<div class="container_image">3</div>
<div class="container_image">4</div>
<div class="container_image">5</div>
<div class="container_image">6</div>
<div class="container_image">7</div>
<div class="container_image">8</div>
<div class="container_image">9</div>
<div class="container_image">10</div>
<div class="container_image">11</div>
<div class="container_image">12</div>
<div class="container_image">13</div>
<div class="container_image">14</div>
<div class="container_image">15</div>
<div class="container_image">16</div>
<button id="more">Еще</button>
<script>
function showImg(items,start,stop) {
     for(var i = start; i < stop; i++){
          items[i].style.display = "block";
     } 
}
var images = document.querySelectorAll(".container_image"),
      moreBut = document.querySelector("#more"),
      limit = 4, begin = 0, end = 0;
if(images.length < limit) {
    end = images.length;
} else {
    end = limit;
    moreBut.style.display = "block";
};
showImg(images,begin,end); 
moreBut.onclick = function() {
    if(images.length > end) {
      begin = end;
      end = end + limit;
      if(end>=images.length){
          end = images.length;
          moreBut.style.display = "none";
      } 
      showImg(images,begin,end);
    
   }
}
window.onscroll = function() {
    if(moreBut.getBoundingClientRect().top < (document.body.clientHeight - 30))
    moreBut.dispatchEvent(new Event('click')) ;
}
</script>

Последний раз редактировалось Dilettante_Pro, 20.02.2019 в 16:36.
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2019, 13:24
Профессор
Отправить личное сообщение для Stas1985 Посмотреть профиль Найти все сообщения от Stas1985
 
Регистрация: 05.03.2012
Сообщений: 159

Dilettante_Pro А можно сделать чтоб при скроле подгружалось?
Ответить с цитированием
  #6 (permalink)  
Старый 20.02.2019, 13:31
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,705

Stas1985, я думаю вам в раздел «работа» стоит написать, там вам смогут реализовать все ваши требования.
Ответить с цитированием
  #7 (permalink)  
Старый 20.02.2019, 16:37
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Stas1985
можно сделать чтоб при скроле подгружалось
Добавил
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Диалог между HTML и внешним JS в контексте расширения GoogleChrome ev1lart Events/DOM/Window 0 26.04.2017 19:25
ошибка Unexpected token ILLEGAL если есть перенос строки в тексте kuchuluk Серверные языки и технологии 9 25.08.2014 22:52
Есть ли такая функция?... GuitarFan Элементы интерфейса 10 02.06.2012 18:15
помогите задать переменную в js bsgroupua Общие вопросы Javascript 3 01.02.2010 18:28