1

我发现了一个非常酷的脚本，叫做“Packery”，并决定使用这个来代替更著名的网格脚本。

但是脚本提供的站点上只有很少的文档，所以我真的很想知道将它与 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...

还有一个问题，我遇到了如何在页面加载时使用 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 );
  });

我不知道如何很好地使用附加选项，所以我很难自己修复它。

欢迎任何帮助。

此致，

4

2 回答 2

0

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

于 2013-10-19T23:44:56.833 回答
0

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

尽管我购买了商业许可证，但 Packery 对于像我这样的新手来说似乎很难使用。

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

不管怎样，谢谢你的指点。

于 2013-10-22T04:01:40.253 回答