Infinitescroll、packery 和 canvas

Question

我正在尝试实现infinite scroll 和packery。 我绝不是一个编码员，但这是我能够开始工作的：

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

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

问题是，我还想将 packetry.spaces 与画布结合使用来填充元素之间的间隙，例如：http://codepen.io/desandro/pen/shleG

我对代码没有深入了解，但是我已经能够得出一个令人满意的结果，主要是复制和粘贴right here，其中涉及到这一行

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

等等。但是......当我以这种方式启动包装时，我只能让它工作：

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

当使用 querySelector 启动它时，我无法让无限滚动在同一个“容器”上工作。

所以现在我有无限滚动或填充间隙使用包装，但不是两者兼而有之。

如果有一种简单的方法可以使这一切正常工作，我真的很感激任何提醒！

Answer 1

d'oh... 当使用 querySelector 启动（如果确实是“启动”这个词）打包时，您需要像这样附加它：

pckry.appended( newElements );

就是这样。