Infinite Scroll


In this example you can see how to use the plugin to obtain an infinite scroll.

The first thing to do is to initialize the gallery as usually.

$('#gallery').justifiedGallery({rowHeight:120});

Then you need to implement the infinite scroll as you want. You have only to recall Justified Gallery after that you have added some images. For example:

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    for (var i = 0; i < 5; i++) {
      $('#gallery').append('<a>' +
          '<img src="http://path/to/image" />' + 
          '</a>');
    }
    $('#gallery').justifiedGallery('norewind');
  }
});

You can notice that we are calling Justified Gallery using the special command 'norewind'. In this way the plugin doesn't re-analyzes all the images, but only the new ones. This parameter increases the performance, and also prevents the page to have strange behaviours with the scrollbars. Moreover, with this command, only the new images are filtered, ordered, or randomized.

Scroll down the page to see the new images