Infinitescroll, packery and canvas

Question

I'm trying to implement infinite scroll and packery. I'm by no means much of a coder, but this is what I've been able to get to work:

var $container = $('#content');
$container.packery({
  // options
});

/* INFINITESCROLL */
$container.infinitescroll({
     //options
}, function( newElements ) {
  $(newElements).imagesLoaded( function() {
     $container.packery( 'appended', newElements ); 
});

problem is, I also want to use packetry.spaces in conjunction with the canvas to fill gaps between elements, like in this example: http://codepen.io/desandro/pen/shleG

I don't have a deep understanding of the code, but I've been able to come up with a satisfactory result with what mostly amounts to copying and pasting right here, which involves this line

var canvas = container.querySelector('canvas');

etc. but... I've only been able to get this to work when I initiate packery this way:

var $container = document.querySelector('#content');
var pckry = new Packery( $container, {
  // options
  itemSelector: '.brick',
  gutter: 5
});

and I've been unable to make infinitescroll working on the same "container" when initiating it with the querySelector.

so right now I have infinitescroll OR fill-gaps working with packery, but not both.

If there's a simple way of making it all work, I'd really really appreciate any heads up!

Answer 1

d'oh... when using querySelector to initiate (if "initiate" is indeed the word) packery, you need to append it like this:

pckry.appended( newElements );

and that's it.