如何使用jQuery Infinite AJAX滚动包括循环

Question

因为我是javascript的新手，所以我来这里学习一些技术。我正在尝试在我的代码中实现无限的 Ajax 滚动。这是我的php页面：

<div class="row row-sm padder-lg ">
<?php
foreach ($top->feed->entry as $key => $value) 
{
    $value->title->label = str_ireplace( "- ".$value->author->label, "",  $value->title->label);
    if($key >= $this->config->item("items_top"))
        return false;
    $image = $value->image[2]->label;
    if($image == '')
        $image = base_url()."assets/images/no-cover.png";
    $image = str_ireplace("170x170", "200x200", $image);
?>      
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="item">
        <div class="pos-rlt">
            <a onclick="get_more('<?php echo addslashes($value->title->label); ?>','<?php echo addslashes($value->author->label); ?>','<?php echo $image; ?>'); ?>');"  href="#">           
                <div class="item-overlay opacity r r-2x bg-black">
                    <div class="center text-center m-t-n">
                        <i class="icon-control-play i-2x"></i>
                    </div>                      
                </div>
                <a href="#">
                    <div class="r r-2x img-full" style="background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;">
                        <div style="height:180px;overflow:hidden;"></div>
                    </div>
                </a>
             </a>
        </div>
    </div>
</div>
<?php
}
?>
<script>
$(".removehref").attr("href","#");
</script>

我决定使用这个jQuery来实现以下目的：无限AJAX滚动在示例中，这是我应该做的：

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<div id="pagination">
  <a href="page1.html">1</a>
  <a href="page2.html" class="next">2</a>
</div>

简单易行...但不是在我的情况下。确实容器比较复杂，里面有一个循环，我应该怎么做？那么分页呢？

编辑正如建议的那样，这更适合我的情况，而无需使用上面的jQuery，但是我对使用感到困惑。

如何使用循环foreach进入function doSomething() {？

 <script>
        $(document).scroll(function(e){
            // grab the scroll amount and the window height
            var scrollAmount = $(window).scrollTop();
            var documentHeight = $(document).height();
            // calculate the percentage the user has scrolled down the page
            var scrollPercent = (scrollAmount / documentHeight) * 100;
            if(scrollPercent > 50) {
                // run a function called doSomething
               doSomething();
            }
            function doSomething() {
                // do something when a user gets 50% of the way down my page
            }
        });
</script>   

Answer 1

如果它不符合您的需求，最好编写自己的。 它们并不太复杂。

通常对于这样的事情，您有 2 个文件：

1. 带有 AJAX 函数的 HTML 页面
2. 服务器上的 PHP 脚本，接收来自 AJAX 的调用并返回值

因此，您将在服务器上获取内容的代码存储在PHP脚本中。 然后，您可以单击一个按钮，或者有一个测试，该测试将自动调用AJAX函数，将请求发送到服务器上的PHP脚本，将结果返回到AJAX，然后附加到页面。

查看 AJAX 调用的 http://api.jquery.com/jquery.post/。

要在到达末尾时自动加载更多内容，可以使用 jQuery 的.height()来获取页面的高度，并.scrollTop()针对页面上的当前位置进行测试。 如果scrollTop等于（或大于）height ，则调用 AJAX 函数。