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

并且我无法让infinitescroll在同一个＆＃34;容器＆＃34;使用querySelector启动它时。

所以现在我有infinitescroll OR填补空白与packery，但不是两个。

如果有一种简单的方法可以让它全部发挥作用，我真的非常感谢任何提升！

Answer 1

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

pckry.appended( newElements );

就是这样。