如何使用包括循環的jQuery Infinite AJAX Scroll

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

1. 具有AJAX功能的HTML頁面
2. 服務器上的PHP腳本接收來自AJAX的調用並返回值

因此，您將使用PHP腳本將獲取內容的代碼存儲在服務器上。 然后，您可以單擊一個按鈕，或者進行一個測試，該測試將自動調用您的AJAX函數，將請求發送到服務器上的PHP腳本，將結果返回到您的AJAX，然后追加到頁面上。

看一下http://api.jquery.com/jquery.post/中的AJAX調用。

要在到達末尾時自動加載更多內容，可以使用jQuery的.height()獲取頁面的高度，並使用.scrollTop()對照頁面上的當前位置進行測試。 如果scrollTop等於（或大於） height ，則調用您的AJAX函數。