無限砌石無效

Question

我確實有以下源代碼：

CSS

.item { float: left;}

.item.w2 { width:  100px; }
.item.w3 { width:  200px; }
.item.w4 { width:  300px; }

.item.h2 { height: 100px; }
.item.h3 { height: 200px; }
.item.h4 { height: 300px; }

PHP

<?php
$all = array();

$dir = "/www/htdocs/test/test.com/images";
chdir($dir);
array_multisort(array_map('filemtime', ($img = glob("*.*"))), SORT_DESC, $img);

for($i=0; $i<=count($img)-1; $i++)
{
    $name = $img[$i];
    list($wi, $he) = getimagesize($dir . "/" . $name);

    $all[$i]['url'] = $name;
    $all[$i]['reso'] = $wi;
}
?>

HTML

<div style="position: absolute; width: 100%;">
    <div style="position: relative; width: 100%; background-image: url(http://test.com/images/bg.jpg);">
            <div id="gallery-div" style="position: absolute; width: 100%; height: 2500px;">
            </div>
    </div>
</div>

<nav id="page-nav"> 
    <a href="http://test.com/gallery.php"></a> 
</nav>

JAVASCRIPT

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

<script>
        $("#bg-top").css("height", $(window).height());

        var images = <?php echo json_encode($all); ?>;
        var buffer = "";

        // THIS PART PUTS ALL IMAGES INTO THE RIGHT DIVS
        for(i=0; i<= images.length-1; i++)
        {   
            var url = "http://test.com/images" + images[i]['url'];

            if(images[i]['reso']==100)
            {
                buffer += "<div class='item w2 h2'><img src='" + url + "'/></div>";
            }

            if(images[i]['reso']==200)
            {
                buffer += "<div class='item w3 h3'><img src='" + url + "'/></div>";
            }

            if(images[i]['reso']==300)
            {
                buffer += "<div class='item w4 h4'><img src='" + url + "'/></div>";
            }
        }

        // HERE ALL THE IMAGES WILL BE APPENDED TO #GALLERY-DIV
        $('#gallery-div').append(buffer);

$(function(){
    var $container = $('#gallery-div');

    // THIS WORKS PERFECTLY FINE!
    // Masonry + ImagesLoaded
    $container.imagesLoaded(function(){
        $container.masonry({
            // selector for entry content
            itemSelector: '.item',
            columnWidth: 100
        });
    });
    // UNTIL HERE ...

    // THIS DOES NOT WORK !!!
    // Infinite Scroll
    $container.infinitescroll({
        // selector for the paged navigation (it will be hidden)
        navSelector  : '#page-nav',
        // selector for the NEXT link (to page 2)
        nextSelector : '#page-nav a',
        // selector for all items you'll retrieve
        itemSelector : '.item',

        // finished message
        loading: {
            finishedMsg: 'No more pages to load.'
            }
        },

        // Trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });

    });
    // UNTIL HERE ...
 });
</script>

GALLERY.PHP的輸出是這個

圖庫

<div class='item'><img src='http://www.lessons4living.com/images/penclchk.gif'/></div>
<div class='item'><img src='http://www.lessons4living.com/images/penclchk.gif'/></div>

我現在要擁有的是無限滾動功能。 當我向下滾動到頁面底部時，應該顯示GALLERY.PHP的內容，但沒有出現。 其他一切工作都很好，這也意味着MASONRY功能可以訂購圖像。 唯一不運行的是無限滾動。 當我滾動到底部時，什么也沒有發生。

Answer 1

我假設您使用的是Infinite-scroll v2.1.0，因為我對此也一直在head之以鼻。

如果打開無限滾動調試（調試：true），則應該看到以下消息：

抱歉，我們無法解析您的下一個（上一個帖子）URL。 驗證css選擇器是否指向正確的A標簽。 如果仍然出現此錯誤：大喊大叫，請到infinite-scroll.com尋求幫助。

我發現此版本要求頁面編號在下一個URL中，以便正確解析（然后對下一個頁面編號進行計算）。 因此，在您的下一頁URL中，您應該具有以下內容：

<nav id="page-nav"> 
    <a href="http://test.com/gallery.php?page=2"></a> 
</nav>

如果您想控制分頁模式，則有一種解決方法，請看一下此注釋： https : //github.com/infinite-scroll/infinite-scroll/issues/190#issuecomment-9532922