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

问题

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

标签

ajax

append

jquery-masonry

getimagesize