如何使用 jQuery Infinite AJAX Scroll including a loop

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 的目的是：Infinite AJAX Scroll 在示例中，这是我应该做的：

<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 个文件：

您的 HTML 页面具有 AJAX 功能
服务器上的一个 PHP 脚本接收来自 AJAX 的调用并 return 值

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

查看 http://api.jquery.com/jquery.post/ 以获得 AJAX 调用。

要在到达末尾时自动加载更多内容，您可以使用 jQuery 的 .height() to get the height of the page and .scrollTop() 来测试页面上的当前位置。如果 scrollTop 等于（或大于）height，则调用您的 AJAX 函数。

如何使用 jQuery Infinite AJAX Scroll including a loop

How to use jQuery Infinite AJAX Scroll including a loop

html

php

ajax

jquery

jquery-ias