Question

我发现了一个名为“Packery”的非常酷的脚本，并决定用这个代替Masonry更着名的网格脚本。

但是脚本提供的网站上只有很少的文档，所以我真的很想知道使用WordPress query_posts和Infinitescroll进行集成的方式还有imagesLoaded。

packery
无限滚动
imagesloaded

通过使用这些，我设置了样本WP站点，如下所示，但它不起作用Infinitescroll和怀疑图像也加载。

的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>

以下是示例网站网址http://itadakimasu.sakura.ne.jp/packery/，看起来Packery和draggy脚本工作正常，但infinitescroll必须是NO ...

还有一个我遇到的问题如何使用带有imagesLoaded JS的“进度”动画，当页面加载时不首先依赖“追加选项”，这意味着当页面加载时，然后在整个分心的帖子中逐步显示图像通过query_posts。

我发现这个代码如下，但不知道如何重用这个适用于页面加载效果。

参考：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 );
  });

我没有弄清楚附加选项的使用情况，所以我自己很难解决这个问题。

欢迎任何帮助。

致以最诚挚的问候，

Answer 1

试试这个http://packery.metafizzy.co/有一个名为下载这些文档的按钮，它已经退出了有关Packery以及如何使用它的信息。

Answer 2

是的，我已经仔细研究了这一点，但没有提到使用Infinitescroll集成方式的段落。

虽然我买了商业执照，但像我这样的新手似乎很难使用。

我等待作者在几个月后扩展该官方文档。

无论如何，谢谢你的指示。

如何将Packery JS与“WordPress的query_posts”和Infinitescroll集成在一起的图像已加载JS

2 个答案: