Question

好的，第一次问题。我有一个PHP脚本，将图像从文件夹拉入列表项，它也有分页选项。我应用Masonry制作网格，现在我正在尝试（非常不成功）整合ajax infinite scroll，这样我就可以逐步拉出新图像，因为最终的画廊会非常大。到目前为止，无限滚动正在加载下面的顺序页面并堆叠其他页面。如果我把砖石关掉，它似乎按预期工作。

源代码：

        ...
        #masonry ul {
            width:100%;
            list-style: none;
        }

        #masonry li {
            float: left;
            list-style: none;
        }

        #imageList {border:2px solid;}
            .ias-trigger {
            position:absolute;
            bottom:0px; 
            left:300px;
        }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="scripts/masonry.pkgd.js"></script>
    <script src="scripts/imagesloaded.pkgd.min.js"></script>
    <script src="scripts/jquery-ias.min.js"></script>
</head>

<body>
    <div id="masonry">
        <ul id="imageList">
            <?php
                $dsg_pagination_per_page = 10;
                $dsg_thumb_operation = 'scale';
                $dsg_thumb_width = 300;
                $dsg_thumb_height =300;
            ?>
            <?php include 'dsg.php'; ?>
        </ul>
     </div>  
    <br>
    <?php echo $dsg_pagination_nav; // print pagination links ?>
    <script>
        var $container = $('#imageList');
        //initialize Masonry after all images have loaded  
        $container.imagesLoaded( function() {
            $container.masonry();
        });

        var ias = $.ias({
            container: "#imageList",
            item: ".item",
            delay:1200,
            pagination: "#pagination",
            next: ".next a"
        });
        ias.extension(new IASSpinnerExtension());
        ias.extension(new IASNoneLeftExtension({html: '<div style="text-align:center; position:absolute; bottom:0; left0;"><p><em>You reached the end!</em></p></div>'}));
    </script>
</body>
</html>

呈现代码： http://m-casper.com/sample/index2.php

Answer 1

经过一周的搜索后，

从另一篇文章中找到了答案：

tumblr masonry + infinite scrolling overlapping posts despite using desandro and new jquery

无限AJAX滚动与砌体和PHP图像库图像重叠

1 个答案: