js implements loading more function instances

<div class="content">

  <div class="weui_panel weui_panel_access">

    <div class="weui_panel_hd">文章列表</div>

    <div class="weui_panel_bd js-blog-list">

    </div>

  </div>

  <!--加载更多按钮-->

  <div class="js-load-more">加载更多</div>

</div>

<script src="js/zepto.min.js"></script>

@charset "utf-8";

.js-load-more{

  padding:0 15px;

  width:120px;

  height:30px;

  background-color:#D31733;

  color:#fff;

  line-height:30px;

  text-align:center;

  border-radius:5px;

  margin:20px auto;

  border:0 none;

  font-size:16px;

  display:none;/*默认不显示，ajax调用成功后才决定显示与否*/

}

$(function(){

  /*初始化*/

  var counter = 0; /*计数器*/

  var pageStart = 0; /*offset*/

  var pageSize = 4; /*size*/

  /*首次加载*/

  getData(pageStart, pageSize);

  /*监听加载更多*/

  $(document).on('click', '.js-load-more', function(){

    counter ++;

    pageStart = counter * pageSize;

    getData(pageStart, pageSize);

  });

});

function getData(offset,size){

  $.ajax({

    type: 'GET',

    url: 'json/blog.json',

    dataType: 'json',

    success: function(reponse){

      var data = reponse.list;

      var sum = reponse.list.length;

      var result = '';

      /****业务逻辑块：实现拼接html内容并append到页面*********/

      //console.log(offset , size, sum);

      /*如果剩下的记录数不够分页，就让分页数取剩下的记录数

      * 例如分页数是5，只剩2条，则只取2条

      *

      * 实际MySQL查询时不写这个不会有问题

      */

      if(sum - offset < size ){

        size = sum - offset;

      }

      /*使用for循环模拟SQL里的limit(offset,size)*/

      for(var i=offset; i< (offset+size); i++){

        result +=&#39;<div class="weui_media_box weui_media_text">&#39;+

            &#39;<a href="&#39;+ data[i].url +&#39;" target="_blank"><h4 id="nbsp-data-i-title-nbsp">&#39;+ data[i].title +&#39;</h4></a>&#39;+

            &#39;<p class="weui_media_desc">&#39;+ data[i].desc +&#39;</p>&#39;+

          &#39;</div>&#39;;

      }

      $('.js-blog-list').append(result);

      /*******************************************/

      /*隐藏more按钮*/

      if ( (offset + size) >= sum){

        $(".js-load-more").hide();

      }else{

        $(".js-load-more").show();

      }

    },

    error: function(xhr, type){

      alert('Ajax error!');

    }

  });

}

$(function(){

  /*初始化*/

  var counter = 0; /*计数器*/

  var pageStart = 0; /*offset*/

  var pageSize = 7; /*size*/

  var isEnd = false;/*结束标志*/

  /*首次加载*/

  getData(pageStart, pageSize);

  /*监听加载更多*/

  $(window).scroll(function(){

    if(isEnd == true){

      return;

    }

    // 当滚动到最底部以上100像素时， 加载新内容

    // 核心代码

    if ($(document).height() - $(this).scrollTop() - $(this).height()<100){

      counter ++;

      pageStart = counter * pageSize;

      getData(pageStart, pageSize);

    }

  });

});

if ( (offset + size) >= sum){

  isEnd = true;//没有更多了

}

/*

 * loadmore.js

 * 加载更多

 *

 * @time 2016-4-18 17:40:25

 * @author 飞鸿影~

 * @email jiancaigege@163.com

 * 可以传的参数默认有：size,scroll 可以自定义

 * */

;(function(w,$){

  var loadmore = {

    /*单页加载更多 通用方法

     *

     * @param callback 回调方法

     * @param config 自定义参数

     * */

    get : function(callback, config){

      var config = config ? config : {}; /*防止未传参数报错*/

      var counter = 0; /*计数器*/

      var pageStart = 0;

      var pageSize = config.size ? config.size : 10;

      /*默认通过点击加载更多*/

      $(document).on('click', '.js-load-more', function(){

        counter ++;

        pageStart = counter * pageSize;

        callback && callback(config, pageStart, pageSize);

      });

      /*通过自动监听滚动事件加载更多,可选支持*/

      config.isEnd = false; /*结束标志*/

      config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/

      $(window).scroll(function(){

        /*是否开启滚动加载*/

        if(!config.scroll){

          return;

        }

        /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/

        if(config.isEnd == true || config.isAjax == true){

          return;

        }

        /*当滚动到最底部以上100像素时， 加载新内容*/

        if ($(document).height() - $(this).scrollTop() - $(this).height()<100){

          counter ++;

          pageStart = counter * pageSize;

          callback && callback(config, pageStart, pageSize);

        }

      });

      /*第一次自动加载*/

      callback && callback(config, pageStart, pageSize);

    },

  }

  $.loadmore = loadmore;

})(window, window.jQuery || window.Zepto);

$.loadmore.get(getData, {

  scroll: true, //默认是false,是否支持滚动加载

  size:7, //默认是10

  flag: 1, //自定义参数，可选，示例里没有用到

});

function getData(config, offset,size){

  config.isAjax = true;

  $.ajax({

    type: 'GET',

    url: 'json/blog.json',

    dataType: 'json',

    success: function(reponse){

      config.isAjax = false;

      var data = reponse.list;

      var sum = reponse.list.length;

      var result = '';

      /************业务逻辑块：实现拼接html内容并append到页面*****************/

      //console.log(offset , size, sum);

      /*如果剩下的记录数不够分页，就让分页数取剩下的记录数

      * 例如分页数是5，只剩2条，则只取2条

      *

      * 实际MySQL查询时不写这个

      */

      if(sum - offset < size ){

        size = sum - offset;

      }

      /*使用for循环模拟SQL里的limit(offset,size)*/

      for(var i=offset; i< (offset+size); i++){

        result +=&#39;<div class="weui_media_box weui_media_text">&#39;+

            &#39;<a href="&#39;+ data[i].url +&#39;" target="_blank"><h4 id="nbsp-data-i-title-nbsp">&#39;+ data[i].title +&#39;</h4></a>&#39;+

            &#39;<p class="weui_media_desc">&#39;+ data[i].desc +&#39;</p>&#39;+

          &#39;</div>&#39;;

      }

      $('.js-blog-list').append(result);

      /*******************************************/

      /*隐藏more*/

      if ( (offset + size) >= sum){

        $(".js-load-more").hide();

        config.isEnd = true; /*停止滚动加载请求*/

        //提示没有了

      }else{

        $(".js-load-more").show();

      }

    },

    error: function(xhr, type){

      alert('Ajax error!');

    }

  });

}