Wordpress jetpack бесконечный свиток и Isotope

Question

В настоящий момент я занят созданием нового шаблона Wordpress, где я пытаюсь реализовать Infinite-Scroll (который является частью «Jetpack») в сочетании с Isotope. Стартовая страница проекта: 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', 
    )); 

проблема является я понятия не имею, как сделать изотоп распознавать новые добавленные элементы и relayout р roperly.

Было бы здорово, если бы кто-нибудь мог мне помочь!

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> 

, но я должен был использовать кладку вместо изотопа.