Wordpress jetpack 无限滚动和同位素

Question

目前我正忙于创建一个新的 wordpress 模板，我尝试在其中结合 Isotope 实现 Infinite-Scroll（"Jetpack" 的一部分）。项目主页为：http://184990.webhosting29.1blu.de/fashion/.

这是我的同位素代码：

    <script type="text/javascript">
jQuery(document).ready(function($){
    var $container = jQuery('#content').isotope({
    itemSelector: '.isotope-item',
    masonry: {
        columnWidth: '.isotope-item',
        gutter: 20,
        }
    });
    $container.imagesLoaded( function() {
    $container.isotope('layout');
    });     
}); 
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
    jQuery(document.body).on( 'post-load', function () {
    alert("New elements added.");
    });
});
</script>

如您所见，当无限滚动添加新元素时，我设置了一个 jquery 警报 ("new elements added")

我把这个添加到我的 functions.php:

    //Infinite Scroll
    add_theme_support( 'infinite-scroll', array(
    'container' => 'content',
    'wrapper' => false,
    'footer' => 'page',
      ) );

问题是我不知道如何让同位素识别新添加的元素并正确重新布局。

如果有人能帮助我，那就太好了！

Answer 1

这完成了工作：

<script>
  jQuery(function($){

    var $container = jQuery('#content');
    $container.masonry({
        itemSelector: '.isotope-item',
        columnWidth: '.isotope-item',
        gutter: 20,
      });

    $container.imagesLoaded(function(){
      $container.masonry();
    });

    $container.infinitescroll({
      navSelector  : '#nav-below',    // selector for the paged navigation 
      nextSelector : '#nav-below a.next',  // selector for the NEXT link (to page 2)
      itemSelector : '.isotope-item',     // selector for all items you'll retrieve
      loading: {
          speed: 0,
          msgText: 'Lade weitere...',
          finishedMsg: 'Du bist am Ende angelangt.',
          img: 'data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw==',
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

  });
</script>

但我不得不使用砖石而不是同位素。

Wordpress jetpack 无限滚动和同位素

Wordpress jetpack infinite scroll and Isotope

wordpress

jquery

jquery-masonry

infinite-scroll

jquery-isotope