0

無限スクロールと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

私はコードを深く理解していませんが、この行を含むここにコピーして貼り付けることで満足のいく結果を得ることができました

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

などしかし...この方法でpackeryを開始した場合にのみ、これを機能させることができました:

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

querySelectorで開始するときに、同じ「コンテナ」で無限スクロールを機能させることができませんでした。

だから今、私はpackeryで動作するinfinitescroll OR fill-gapsを持っていますが、両方ではありません。

それをすべて機能させる簡単な方法があれば、私は本当に頭を上げていただければ幸いです!

4

1 に答える 1

0

ああ... querySelector を使用してパケットを開始する場合 (「開始」が実際に単語である場合)、次のように追加する必要があります。

pckry.appended( newElements );

以上です。

于 2014-05-20T02:53:42.583 に答える