4

此处使用 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();
            }
        }
    });
});
4

1 回答 1

4

您可以尝试在此处实施 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');
于 2012-08-23T14:13:46.457 回答