1

由于我是 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>
4

1 回答 1

1

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

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

  1. 具有 AJAX 功能的 HTML 页面
  2. 服务器上的 PHP 脚本接收来自 AJAX 的调用并返回值

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

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

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

于 2015-01-31T19:45:24.063 回答