Masonry: DIVs overlap even after I add imagesLoaded and 'reload'

StackOverflow https://stackoverflow.com/questions/22444770

Вопрос 

$(document).ready(function(){
    // SECTION 1
    // Seting up the element which contains the divs that will be used in the Masonry
    var $galWrapper = $('#gallery-wrapper');
    $galWrapper.imagesLoaded(function(){
        $galWrapper.fadeIn(1000) // #gallery-wrapper's CSS 'display' property is 'none' when web page is opened. Then it fades in after the images are loaded
            .masonry({
                itemSelector: '.picture-wrapper',
                transitionDuration: 0
            });
    });


    // SECTION 2: SCROLL PAGINATION
    var $doc = $(document);
    var $win = $(window);
    var isFetchingPics = false; // boolean variable to see if script is fetching items from the server
    var imgFirst = 0;

    $win.scroll(function(){
        var $scroll = $win.scrollTop();
        var $docHeight = $doc.height();
        var $winHeight = $win.height();

        // If-statement triggers when user reaches near bottom of page
        if( $scroll >= ($docHeight - $winHeight - 800) ){
            if(!isFetchingPics){
                isFetchingPics = true;
                imgFirst = imgFirst+20; // This tells the server-side script which row to start from

                $.get(
                    'index.php',
                    {
                        img_first: imgFirst
                    },
                    function(responseHTML){
                        $responseHTML = $(responseHTML); // responseHTML is something like '<div id="10" class="picture-wrapper"><img src="http://i.imgur.com/whatever.jpg"></div> <div id="11" class="picture-wrapper"><img src="http://i.imgur.com/some-picture.jpg"></div>' ... 

                        // Here's where I'm getting trouble, I think. Even though this whole thing is wrapped in 'imagesLoaded', the DIVs that contain the pics still overlap each other on load. 
                        // However, if I wait for all the images to load, and reload the page, then there is usually no overlap when images get appended
                        $galWrapper.imagesLoaded(function(){
                            $galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload'); // I've tried both 'reload' and 'reloadItems', but nothing works

                            isFetchingPics = false;
                        });
                    }
                );
            };
        };
    });
}); // DONE: $(document).ready

OK, here's the problem: when I scroll down, my script sends a GET request to the server and retrieves a bunch of DIVs to put in #gallery-wrapper. I wrap the .append function in .imagesLoaded but the pictures still overlap one another the first time the web page loads.

But if I hit refresh in my browser, and scroll down again, then the pictures load just fine -- without overlap. I thought that the 'reload' part on this line ($galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload');) would make the script reload the images, and thus stop the overlap, but there is still overlap. I also tried using 'reloadItems', but that did not solve the problem either.

Why? How do I make it so that the pics load correctly the first time around?

My browser is FireFox v27.0.1

EDIT: Here's what I have in my <head> area. Masonry and ImagesLoaded are both v3.1.4

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="./css/style.css?v=0.1"> <!-- Site CSS -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- jQuery -->
        <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <!-- jQuery tools -->
        <script src="./js/imagesloaded.pkgd.min.js"></script> <!-- imagesLoaded -->
        <script src="./js/masonry.pkgd.min.js"></script> <!-- Masonry -->
        <script src="./js/script.js?v=0.1"></script> <!-- Site script -->
    </head>

EDIT 2: THE PROBLEM OF OVERLAPPING IMAGES IS SOLVED I changed this...

$galWrapper.imagesLoaded(function(){
    $galWrapper.append($responseHTML)
        .masonry('appended', $responseHTML, 'reload);
});

to this...

$galWrapper.append($responseHTML).imagesLoaded(
    function(){
        $galWrapper.masonry('appended', $responseHTML);
        isFetchingPics = false;
    }
);

For some reason, putting the $.append() method outside .imagesLoaded stops overlapping. I now have a new problem where the newly-loaded images load in a single column to the left before going into masonry form. But at least the overlapping problem is fixed.

Это было полезно?

Решение

Have you looked at this thread on github?

https://github.com/desandro/masonry/issues/374

As I read it, it's dealing with the same issues you're having, fixing it by filtering the get results.

Also, there's this thread on github about appending with ajax:

https://github.com/desandro/masonry/issues/520

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top