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。在这种情况下，需要在新附加的图像完全加载后调用砌体。这是通过延迟砌体回调来完成的。“

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

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

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

这样做

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

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

1 个答案: