Попытка сделать бесконечный свиток со списком div уже в HTML - PullRequest
Новая
       26

Попытка сделать бесконечный свиток со списком div уже в HTML

0 голосов
/ 29 мая 2019

Я пытаюсь написать функцию в jQuery, которая могла бы создать бесконечную прокрутку с элементами div, которые уже есть на моей странице.Я хотел бы, чтобы они появлялись и загружались случайным образом, когда вы достигли конца оригинального контента.Дело в том, что я только начинаю использовать jQuery, и я действительно не знаю, кто это делает!

Все мои div имеют класс item и находятся внутри .content div.На данный момент у меня их 11.

Я пытался .append(specific div), и это сработало, но я не знаю, как это сделать с помощью списка div.

Кто-нибудь имеет представление о том, что я должен делать? 

    $(document).ready(function() {
      var collection = $("div.content .item").get();
      collection.sort(function() {
        return Math.random() * 10 > 5 ? 1 : -1;
      }); 

      $.each(collection, function(i, el) {
        $(el).appendTo($(el).parent());
      });
    });

    $(window).scroll(function() {
      if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        $(".content").append('Here is where I dont know what I should write')
      });
    });
  }
});

1 Ответ

0 голосов
/ 29 мая 2019

Hi: 3 Может помочь функция jquery clone (), в вашем случае: 

let triggerDistance = $(document).height() - $(window).height() - 50;
let OriginalItems = $(".item").length;

$(window).scroll(function() {
    let scrolledDistance = $(window).scrollTop();
    if ( scrolledDistance > triggerDistance) {
        var randomItem = Math.floor(Math.random() * OriginalItems);
        var clonedItem = $("#item_"+randomItem).clone();
        clonedItem.removeAttr('id');
        clonedItem.appendTo("html");
    }
});

Вы выбираете случайный элемент из оригинальных, создаете новую копию указанного элемента с помощью клона, вы добавляете клон в документ:)

Вот скрипка: https://jsfiddle.net/collederfomento/d98a15cu/4/

Несколько вещей можно улучшить:

  • , предотвращающих запуск функциислишком часто
  • не позволяет функции клонировать один и тот же элемент дважды подряд
...