Wordpress 喷气背包无限滚动和同位素答案

【问题标题】：Wordpress jetpack infinite scroll and IsotopeWordpress 喷气背包无限滚动和同位素
【发布时间】：2015-05-16 11:53:36
【问题描述】：

目前我正忙于创建一个新的 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 警报（“添加了新元素”）

我将此添加到我的functions.php：

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

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

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

【问题讨论】：

您链接到的页面包含砌体代码，而不是同位素代码。

标签： jquery wordpress jquery-isotope jquery-masonry infinite-scroll

【解决方案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>

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

【讨论】：