jQuery Masonry 和 Ajax-fetching 追加项目导致图像重叠

Question

这里使用 Masonry 和 Ajax 在 Wordpress 中附加项目的另一个图像重叠问题。第一次添加更多项目时，图像会重叠。但是，当页面重新加载时，图像不再重叠。经过一些研究，我意识到这与计算图像的高度有关。

在 Masonry 网站的帮助页面中，建议使用 getimagesize 函数来指定图像的宽度和高度。

但是，这就是我卡住的地方。由于我对 PHP 的了解有限，我不知道如何使用此函数或将其放置在我的代码中的什么位置，所以我在这里寻找一点方向。谁能帮我弄清楚如何将 getimagesize 函数集成到我的代码中？

这是砌体代码：

$(document).ready(function(){

    var $container = $('#loops_wrapper');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.post_box',
        columnWidth: 302

        });
      });
    });

这是 ajax 获取代码：

$('.load_more_cont a').live('click', function(e) {
    e.preventDefault();
    $(this).addClass('loading').text('Loading...');
    $.ajax({
        type: "GET",
        url: $(this).attr('href') + '#loops_wrapper',
        dataType: "html",
        success: function(out) {
            result = $(out).find('.post_box');
            nextlink = $(out).find('.load_more_cont a').attr('href');

            $('#loops_wrapper').append(result).masonry('appended', result);
            $('.load_more_cont a').removeClass('loading').text('Load more posts');

            if (nextlink != undefined) {
                $('.load_more_cont a').attr('href', nextlink);
            } else {
                $('.load_more_cont').remove();
            }
        }
    });
});

Answer 1

您可以尝试在此处实现 David DeSandro 的计时器方法来附加图像...

“按照入门中的建议，处理图像的最佳解决方案是在 img 标签中定义尺寸属性，尤其是在使用无限滚动时。这是下面示例中采用的解决方案。

当然，这在某些 CMS 中不是一个可行的选择，尤其是 Tumblr。在这种情况下，需要在新附加的图像完全加载后调用 Masonry。这是通过延迟 Masonry 回调来完成的。”

function( newElements ) {
    setTimeout(function() {
    $wall.masonry({ appendedContent: $(newElements) });
    }, 1000);
}

编辑：如果您无法实现无限滚动附加项目的常见延迟想法，您可以尝试在附加新项目后重新加载，而不是

$('#loops_wrapper').append(result).masonry('appended', result);

这样做

$("#loops_wrapper").append(result).masonry('reload');