基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )

下面是基于jQuery实现"当鼠标滚轮到最底端继续加载新数据"的完整攻略。

思路

1. 监听页面滚动事件，判断是否滚到底部。
2. 如果滚动到底部，触发加载事件。
3. 加载事件中通过AJAX获取新数据并添加到页面中。

具体实现

下面我们将通过两个示例来详细讲解如何实现该功能。

示例1：模拟加载微博数据

HTML结构：

<div id="weibo-list">
  <ul>
    <li>微博1</li>
    <li>微博2</li>
    <li>微博3</li>
    <li>微博4</li>
    <li>微博5</li>
    <li class="loading">加载中</li>
  </ul>
</div>

CSS样式：

#weibo-list {
  height: 200px;
  overflow: auto;
}
.loading {
  color: #999;
  text-align: center;
}

JS代码：

var loading = false; // 是否正在加载新数据
var pageNo = 1; // 初始化页码为1

$(window).scroll(function(){
  var windowScrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var documentHeight = $(document).height();
  if(windowScrollTop + windowHeight == documentHeight && !loading){
    loading = true;
    $('.loading').show(); // 显示加载提示
    // 模拟AJAX请求获取数据
    setTimeout(function(){
      var arr = ['微博6', '微博7', '微博8', '微博9', '微博10'];
      var html = '';
      for(var i=0; i<arr.length; i++){
        html += '<li>' + arr[i] + '</li>';
      }
      $('#weibo-list ul').append(html);
      $('.loading').hide(); // 隐藏加载提示
      pageNo++; // 页码加1
      loading = false; // 设置不在加载状态
    }, 2000);
  }
});

示例2：模拟加载图片数据

HTML结构：

<div id="image-list">
  <ul>
    <li>
      <img src="images/1.jpg">
      <div class="caption">图片1</div>
    </li>
    <li>
      <img src="images/2.jpg">
      <div class="caption">图片2</div>
    </li>
    <li>
      <img src="images/3.jpg">
      <div class="caption">图片3</div>
    </li>
    <li>
      <img src="images/4.jpg">
      <div class="caption">图片4</div>
    </li>
    <li>
      <img src="images/5.jpg">
      <div class="caption">图片5</div>
    </li>
    <li class="loading">加载中</li>
  </ul>
</div>

CSS样式：

#image-list {
  height: 400px;
  overflow: auto;
}
.loading {
  color: #999;
  text-align: center;
}
#image-list li {
  float: left;
  width: 25%;
  text-align: center;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 0 5px;
}
#image-list li img {
  max-width: 100%;
}

JS代码：

var loading = false; // 是否正在加载新数据
var pageNo = 1; // 初始化页码为1

$(window).scroll(function(){
  var windowScrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  var documentHeight = $(document).height();
  if(windowScrollTop + windowHeight == documentHeight && !loading){
    loading = true;
    $('.loading').show(); // 显示加载提示
    // 模拟AJAX请求获取数据
    setTimeout(function(){
      var arr = ['images/6.jpg', 'images/7.jpg', 'images/8.jpg', 'images/9.jpg', 'images/10.jpg'];
      var html = '';
      for(var i=0; i<arr.length; i++){
        html += '<li><img src="' + arr[i] + '"><div class="caption">图片' + (pageNo * 5 + i + 1) + '</div></li>';
      }
      $('#image-list ul').append(html);
      $('.loading').hide(); // 隐藏加载提示
      pageNo++; // 页码加1
      loading = false; // 设置不在加载状态
    }, 2000);
  }
});

以上是实现"当鼠标滚轮到最底端继续加载新数据"的完整攻略，希望对你有所帮助。