Question

目前我正在忙于创建一个新的wordpress模板，在那里我尝试与Isotope结合使用Infinite-Scroll（它是＆＃34; Jetpack＆＃34;的一部分）。项目主页是：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警报（＆＃34;添加了新元素＆＃34;）

我把它添加到我的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无限滚动和同位素

1 个答案: