Isotope.js - AJAX 및 컨테이너 높이

Question

Isotope.js를 사용하여 포트폴리오를 정렬하는 웹 사이트에서 작업하고 있습니다. 사용자가 AJAX를 클릭하여 더 많은 게시물을로드 할 수있는 버튼도 있습니다.

다음은 임시 웹 사이트로 연결되는 링크입니다 (https://contactlenzes.com).

// Portfolio isotope filter 
$(window).load(function() { 
    var $container = $('.projects'); 
    $container.isotope({ 
     filter: '*', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     } 
    }); 
    $('.taxonomies a').click(function() { 
     $('.taxonomies .active').removeClass('active'); 
     $(this).addClass('active'); 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      } 
     }); 
     return false; 
    }); 

}); 

그리고 이것은 내 AJAX 파일입니다 :

이 내가 Isotope.js을 시작하는 방법이다

다음

jQuery(function($){ 


var $content = $('.projects'); 
var $loader = $('#more_posts'); 
var ppp = 4; 
var offset = $('.projects').find('.project').length; 

$loader.on('click', load_ajax_posts); 

function load_ajax_posts() { 
    if (!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))) { 
     $.ajax({ 
      type: 'POST', 
      dataType: 'html', 
      url: screenReaderText.ajaxurl, 
      data: { 
       'ppp': ppp, 
       'offset': offset, 
       'action': 'mytheme_more_post_ajax' 
      }, 
      beforeSend : function() { 
       $loader.addClass('post_loading_loader').html(screenReaderText.loading); 
      }, 
      success: function (data) { 
       var $data = $(data); 
       if ($data.length) { 
        var $newElements = $data.css({ opacity: 0 }); 



        $content.append($newElements); 

        $content.isotope('appended', $newElements); 

        $content.isotope('reloadItems'); // https://isotope.metafizzy.co/methods.html#reloaditems 

        $content.isotope('layout'); // https://isotope.metafizzy.co/methods.html#layout 


        $newElements.animate({ opacity: 1 }); 

        $loader.removeClass('post_loading_loader').html(screenReaderText.loadmore); 

       } else { 

        $loader.removeClass('post_loading_loader').addClass('post_no_more_posts').html(screenReaderText.noposts); 

       } 
      }, 
      error : function (jqXHR, textStatus, errorThrown) { 
       $loader.html($.parseJSON(jqXHR.responseText) + ' :: ' + textStatus + ' :: ' + errorThrown); 
       console.log(jqXHR); 
      }, 
     }); 
    } 

    offset += ppp; 
    return false; 

} 


}); 

문제입니다!

게시하는 스크립트. 그러나 게시물이로드 될 때 Isotope.js는 컨테이너의 높이를 다시 계산하지 않습니다.

당신이 여기 관찰 할 수 있듯이 : 여기

과 :

필터 버튼을 누르면,이 문제를 해결합니다.

그렇다면 AJAX를 통해 새 게시물을 추가 할 때 Isotope.js가 컨테이너의 높이를 다시 계산하도록하려면 어떻게해야합니까?

또는 필터를 누르면 효과가 복제됩니까 ...?

나는 의미가 있기를 바랍니다.

감사합니다.

Answer 1

누군가이 문제에 걸림돌이되는 경우.

$newElements.imagesLoaded(function(){ 
$content.isotope('layout'); 
}); 

더 많은 정보는 여기에서 찾을 수 있습니다 : https://imagesloaded.desandro.com/

이미지를로드 한 후

나는 등의 $content.isotope('layout');을 포장하는 데 필요한