jQuery Masonry and Ajax-fetching to Append Items Causing Image Overlap

一世执手 提交于 2020-01-01 06:01:09

问题


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.

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.

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?

Here is the masonry code:

$(document).ready(function(){

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

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

        });
      });
    });

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

回答1:


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

"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.

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);

do it like that

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


来源:https://stackoverflow.com/questions/12093378/jquery-masonry-and-ajax-fetching-to-append-items-causing-image-overlap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!