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

问题是，我还想结合 Canvas 使用 packetry.spaces 来填充元素之间的空隙，如本例所示:http://codepen.io/desandro/pen/shleG

我对代码没有很深的理解，但我已经能够通过主要相当于复制和粘贴的方式得出令人满意的结果 right here , 涉及这一行

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

等但是......只有当我以这种方式启动 packery 时，我才能让它工作:

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

并且在使用 querySelector 启动它时，我无法使 infinitescroll 在同一个“容器”上工作。

所以现在我有 infinitescroll 或 fill-gaps 与 packery 一起工作，但不是两者都有。

如果有一种简单的方法可以使这一切正常进行，我将不胜感激!

Answer 1

哦...当使用 querySelector 启动(如果“启动”确实是这个词)包装时，您需要像这样附加它:

pckry.appended( newElements );

就是这样。