Question

$(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

好的，这就是问题所在：当我向下滚动时，我的脚本会向服务器发送一个GET请求并检索一堆DIV以放入#gallery-wrapper。我将.append函数包装在.imagesLoaded中，但是第一次加载网页时图片仍然相互重叠。

但如果我在浏览器中点击刷新，然后再次向下滚动，那么图片加载就好了 - 没有重叠。我认为这一行（'reload'）上的$galWrapper.append($responseHTML).masonry('appended', $responseHTML, 'reload');部分会使脚本重新加载图像，从而停止重叠，但仍然存在重叠。我也尝试使用'reloadItems'，但这也没有解决问题。

为什么呢？如何使图片第一次正确加载？

我的浏览器是FireFox v27.0.1

编辑：这是我在<head>区域的内容。 Masonry和ImagesLoaded都是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>

编辑2：解决了重叠图像的问题我改变了这个......

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

到此......

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

出于某种原因，将$.append()方法放在.imagesLoaded之外会停止重叠。我现在有一个新问题，即新装载的图像在进入砌体形式之前在左侧的单个列中加载。但至少重叠的问题是固定的。

Answer 1

你在github上看过这个帖子吗？

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

当我读到它时，它正在处理您遇到的相同问题，通过过滤获取结果来修复它。

此外，github上的这个主题是关于使用ajax附加：

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

砌体：即使在我添加imagesLoaded和“重新加载”后，DIV也会重叠。

1 个答案: