Question

有人可以解释一下我做错了什么吗？我尝试将无限滚动与砌体布局集成并从我的数据库加载内容。我想从我的数据库中加载图片，向下滚动，限制为15张图片。

masonory布局工作正常，但我不知道无限滚动的问题是什么。

这就是我现在所拥有的。

HTML CODE

<div id="container">

    <?php

    $sql_res=mysql_query("SELECT * FROM test ORDER BY id DESC LIMIT 15");
    while($row=mysql_fetch_array($sql_res))
        {
    $image_name=$row['image_name'];
    $id=$row['id'];

    ?>

<div class="box">


<a href="content.php?id=<?php echo $row['id']; ?>" ><img src="/content/<?php echo   
$image_name; ?>"></a>

</div>

<?php } ?>

</div>

<nav id="page-nav">
<a href="#"></a>
</nav>

JS CODE for MASONRY

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>

<script >
$(document).ready(function() {

// Initialize Masonry
$('#container').masonry({
}).imagesLoaded(function() {
    $(this).masonry('reload');
});

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // 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 ); 
    });
  }
);

});

</script>

谢谢

Answer 1

根据您的示例HTML，您错过了相应的无限滚动设置。

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)

这部分代码确定了应该抓取哪些URL来加载下一个内容。你的例子是空白的。您需要在<nav id="page-nav"><a href="#"></a></nav>中放入无限滚动jquery插件才能访问的有效URL。如果是这样，它将查看该页面的内容以附加到当前页面。您已对其进行了适当配置以查看.box，但您没有第二页可供查看！

请参阅：Infinite Scroll | jQuery plugin

将无限滚动与砌体插件集成并从MYSQL数据库加载数据

1 个答案: