1

「Packery」という非常にクールなスクリプトを見つけたので、Masonry の有名なグリッド スクリプトの代わりにこれを使用することにしました。

しかし、スクリプトが提供されているサイトにはドキュメントがほとんどないので、これを WordPress の query_posts と Infinitescroll も imagesLoaded と統合する方法を知りたいです。

  1. パッカリー
  2. 無限スクロール
  3. 読み込まれた画像

これらを利用してサンプルのWPサイトを以下のように設定したのですが、InfinitescrollやどうやらimagesLoadedもうまくいきません。

index.php/WordPress

<div class="packery">   
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="item w2 h2">
<?php the_title(); ?>
</div>
<?php endwhile; endif;?>
</div>

<div id="infiniteMore">
<?php next_posts_link(); ?>
<?php wp_reset_query(); ?>
</div>

サンプルサイトのURLはこちらhttp://itadakimasu.sakura.ne.jp/packery/、Packeryとdraggyスクリプトは問題ないように見えますが、無限スクロールはNOでなければなりません...

もう1つ、最初に「追加オプション」に依存せずにページがロードされたときにimagesLoaded JSで「進行」アニメーションを使用する方法の問題に直面しました。

このコードは次のように見つかりましたが、ページの読み込み効果に適応したこれを再利用する方法がわかりません。

参照: http://codepen.io/desandro/pen/xtzmg

  // for each loaded image...
  var imgLoad = imagesLoaded( container );
  imgLoad.on( 'progress', function( imgLoad, image ) {
    if ( !image.isLoaded ) {
      return;
    }
    // un-hide item and lay out
    var itemElem = image.img.parentNode;
    classie.remove( itemElem, 'is-hidden' );
    pckry.appended( itemElem );
  });

append オプションの使い方がよくわからないので、自分で直すのは至難の業です。

どんな助けでも大歓迎です。

よろしくお願いします、

4

2 に答える 2

0

はい、私はすでにそれを精査しましたが、Infinitescroll 統合の使用方法について言及された段落はありません。

商用ライセンスを購入したものの、Packery は私のような初心者にはかなり使いにくいようです。

著者がその公式文書をさらに数か月拡張するのを待ちます。

とにかく、ご指摘ありがとうございます。

于 2013-10-22T04:01:40.253 に答える