0

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

砌体布局工作正常，但我不知道无限滚动有什么问题。

这是我到目前为止所拥有的。

代码

<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 代码

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

谢谢

4

1 回答 1

0

Based on your example HTML, you're missing the appropriate infinite scroll setup.

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

This part of the code establishes what URL should be grabbed to load the next content. Your example is blank. You need to put in <nav id="page-nav"><a href="#"></a></nav> a valid URL for the infinite scroll jquery plugin to access. When it does, it will look at that page's content to append to the current page. You've appropriately configured it to look at the .box, but you don't have a page two to look at!

See: Infinite Scroll | jQuery plugin

于 2013-02-07T21:27:05.967 回答