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

2022-01-22 00:00:00 append ajax getimagesize jquery-masonry

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

Another image overlap issue here using Masonry and Ajax to append items in Wordpress. The first time more items are appended, the images overlap. However, when the page is reloaded, the images no longer overlap. I realize after doing some research this has to do with calculating the height of the images.

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

From the help page on the Masonry website, it is suggested to use the getimagesize function in order to specify the width and height of the images.

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

However, this is where I am stuck. Because of my limited knowledge of PHP, I have no idea how to utilize this function or where to place it in my code, so I'm looking for a little direction here. Can anyone help me figure out how to integrate the getimagesize function into my code?

这是砌体代码:

$(document).ready(function(){

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

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

        });
      });
    });

这是 ajax 获取代码:

This is the ajax fetching code:

$('.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();
            }
        }
    });
});

推荐答案

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

You could try to implement David DeSandro's timer approach here for appending images...

正如入门所推荐的，处理图像的最佳解决方案是在 img 标签中定义尺寸属性，尤其是在使用无限滚动时.这是下面示例中采用的解决方案.

"As recommended in the primer, the best solution to handle images is to have the size attributes defined in the img tag, especially when using Infinite Scroll. This is the solution employed in the example below.

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

Of course, this is not a viable option in some CMSs, most notably Tumblr. In this situation, Masonry needs to be called after the newly-appended images are fully loaded. This is done by delaying the Masonry callback."

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

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

EDIT: If you can't implement the common delay idea for appending items with infinite scroll, you could try reloading after appending new items so instead of

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

这样做

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

相关文章