自动加载

原理：判断button是否从下方进入视口，如果进入就自动点击按钮发起ajax加载下一页，否则就不会。
核心代码：

window.onscroll = function(){
  var clientHeight = document.documentElement.clientHeight
  var buttonTop = loadMoreButton.getBoundingClientRect().top;
  if(buttonTop < clientHeight){
      //加载下一页
      loadMore()
  }
}

index.html

  
  
  


  

  
  

    加载更多
    

  
  
  



  

page-2.html

{
  "content": [
    {"url":"//via.placeholder.com/200x200?text=0.111016","text":"这是第 10 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.133008","text":"这是第 11 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.116169","text":"这是第 12 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.162984","text":"这是第 13 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.129932","text":"这是第 14 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.142153","text":"这是第 15 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.128185","text":"这是第 16 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.178477","text":"这是第 17 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.157746","text":"这是第 18 段话"}
  ],
  "hasNextPage": true
}

page-3.html

{
  "content": [
    {"url":"//via.placeholder.com/200x200?text=0.211016","text":"这是第 19 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.233008","text":"这是第 20 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.216169","text":"这是第 21 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.262984","text":"这是第 22 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.229932","text":"这是第 23 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.242153","text":"这是第 24 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.228185","text":"这是第 25 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.278477","text":"这是第 26 段话"},
    {"url":"//via.placeholder.com/200x200?text=0.257746","text":"这是第 27 段话"}
  ],
  "hasNextPage": false
}