Trying to make an infinite scroll with a list of div already in the html

Question

I'm trying to write a function in jQuery that could create an infinite scroll with divs that are already in my page. I would like to make them appear and load randomly when you reached the end of the original content. The thing is that I'm just starting to use jQuery and I don't really know who to do it!

All my divs have a class of item and are inside a .content div. For the moment I have 11 of them.

I tried to .append(specific div) and it worked, but I don't know how to do it with a list of div.

Does anyone have an idea of what I should do?

    $(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')
      });
    });
  }
});

Parenzooooooo · Accepted Answer · 2019-05-29T16:47:26.270

0

Hi :3 The jquery clone() function may be of help, in your case:

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");
    }
});

You select a random item from the original ones, you create a new copy of said item using clone, you append the clone to the document :)

Here's a fiddle: https://jsfiddle.net/collederfomento/d98a15cu/4/

A few things could be improved:

preventing the function from firing too often
preventing the function from cloning the same item twice in a row

edited May 29 '19 at 16:47

answered May 29 '19 at 16:31

Parenzooooooo

31
6

Thanks !!! That seems to be a nice way to do it. But the thing is that it just doesn't react, at all when I put it in my code... I tried to changed the '50' value inside the 'triggerDistance' function but nothing happened. I resized my viewport also, changed the ccs position property. Do you have an idea of why it doesn't work ? Is it something about the viewport size ? – M1011 May 29 '19 at 17:32
Could you provide us with your HTML structure? There are almost certainly differences between my example and your website (e.g. the items are added to the html in my example, while they're added to a div with class "content" in yours). – Parenzooooooo May 29 '19 at 18:04
Here ! I simplified the content but the structure is the same :)) jsfiddle.net/Macha1011/93mwp4vd/1/ – M1011 May 30 '19 at 13:50
Hi! :3 There seems to be a few issues with your code: the ID attribute - which should be unique - is repeated several times. For example, there are two items having the "type_diapo" ID. Regardless, here's a working example: http://jsfiddle.net/collederfomento/84hbdL5w/ Rather than selecting an element with a specific ID, we just tell jQuery to select a random item with the "item" class using the eq selector: $(".item:eq("+randomItem+")") – Parenzooooooo Jun 01 '19 at 10:17
Thank you very much ! Actually I solved my problem yesterday, by changing the ID names, using numbers instead of words and it worked; changing type_diapo, to type_1, 2,3 etc. So your first solution works as well as the second !! But I would like to have your advice, which one should I prefer ? Is the first one, maybe asking more to the jsmachine, then the second ? What do you think ? – M1011 Jun 01 '19 at 16:02
I very much doubt anyone could notice the difference :) The fastest way would probably involve using vanilla Javascript's document.getElementById ( https://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery ). Personally I'd advise you to choose the method you are most comfortable with :) – Parenzooooooo Jun 01 '19 at 16:21
Hello back ! I noticed the script does not copy the effects inside of my divs. For exemple, I'm using flickity in one div, and when the div is cloned, I can't slide the carousel. I tried to add (true) to clone() but it didn't worked out. Any idea ?? – M1011 Jun 16 '19 at 20:42

Trying to make an infinite scroll with a list of div already in the html

1 Answers1