Isotope.js - AJAX 和容器高度

Question

我正在开发一个使用 Isotope.js 对投资组合进行排序的网站。还有一个按钮，用户可以单击该按钮 AJAX 加载更多帖子。

我就是这样发起的Isotope.js:

    // 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 文件：

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

以防有人偶然发现这个问题。

我需要在图像加载后包装 $content.isotope('layout');，例如：

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

可在此处找到更多信息： https://imagesloaded.desandro.com/

Isotope.js - AJAX 和容器高度

Isotope.js - AJAX and container height

jquery

ajax

wordpress

jquery-isotope