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的输出就是这个

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

我假设您正在使用无限滚动v2.1.0，因为我也一直在敲打这个。

如果打开无限滚动调试（debug：true），您应该会看到以下消息：

抱歉，我们无法解析您的下一个（以前的帖子）网址。验证你的 css选择器指向正确的A标签。如果你仍然得到这个错误：大叫，尖叫，并在infinite-scroll.com上寻求帮助。

我发现此版本要求页码为下一页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

无限卷轴的砌体不起作用

1 个答案: