Question

Im using the Wookmark jQuery grid layout for my website.

https://github.com/GBKS/Wookmark-jQuery

I need the auto load/endless scroll working.

In the example it simply just loads the first 10 images again, how do you make it continue loading the rest of a list as on Wookmark.com and Pinterest.com?

The code part that ive been trying to change:

/**
 * When scrolled all the way to the bottom, add more tiles.
 */
function onScroll(event) {
  // Check if we're within 100 pixels of the bottom edge of the broser window.
  var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
  if(closeToBottom) {
    // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
    var items = $('#tiles li');
    var firstTen = items.slice(0, 10);
    $('#tiles').append(firstTen.clone());

    // Clear our previous layout handler.
    if(handler) handler.wookmarkClear();

    // Create a new layout handler.
    handler = $('#tiles li');
    handler.wookmark(options);
  }
};

Thanks in advance. Ive looked around everywhere and tried a few different things, but no luck. Cheers.

Answer 1

I just added an example to the GitHub repository on exactly how to do this. The example loads data from the Wookmark API and displays the images on the page. When you scroll down and reach the bottom, it loads more.

Here’s the direct link to the example: https://github.com/GBKS/Wookmark-jQuery/tree/master/example-api

Let me know how this works out for you.