下拉加载时最近比较流行下拉加载这个效果，自己没事动手实践在phpcms上写了一个，实现还是比较简单，没有修改多少源文件，前端使用的模块化框架layui，都封装好了加载，直接在ajax_append.php文件中按返回的数据格式返回即可

下面直接看我的实例吧

首先在api目录下创建一个ajax_append.php文件，内如如下：

<?php
defined('IN_PHPCMS') or exit('No permission resources.'); 
/**
 * AJAX下拉加载 /api.php?op=ajax_append&modelid=3&catid=1&p=1
 */
$db = '';
$db = pc_base::load_model('content_model');
$MODEL = getcache('model','commons');
$CATEGORYS = getcache('category_content_1','commons');
$modelid = intval($_GET['modelid']);
$pagebase = 20;
$pagenum = 10;
$p = $_GET['p'] ? intval($_GET['p']) : 1;
//v9_picture
$tablename = $db->table_name = $db->db_tablepre.$MODEL[$modelid]['tablename'];
$where = $_GET['catid'] ? "catid = ".intval($_GET['catid']) : 1;
$limit = $pagebase + ($p * $pagenum);
$r = $db->query("SELECT * FROM `$tablename` WHERE $where ORDER BY id DESC LIMIT $limit,$pagenum");
$rs = $db->fetch_array($r);

$total = $db->query("SELECT COUNT(*) AS `count` FROM `$tablename` WHERE $where");
$result = $db->fetch_array($total);
$total = $result[0]['count'] - $pagebase;
$totalpage = round($total/10);
if($totalpage >1 && $p <= 10){
  $data = array();
  $data['code'] = 1;
  $data['msg'] = 'OK';
  if($totalpage > 10){
    $data['pagetotal'] = 10;
  }else{
    $data['pagetotal'] = $totalpage;
  }
  $tablename = $db->table_name = $db->db_tablepre.$MODEL[$modelid]['tablename']."_data";
  foreach ($rs as $key => $value) {
    $r = $db->get_one(array('id'=>$rs[$key]['id']));
    $picnum = count(json_decode($r['pictureurls'], true));
    $inputtime = date("Y-m-d",$rs[$key]['inputtime']);
    $thumb = $rs[$key]['thumb'].'?x-oss-process=style/midpic';
    $catid = $rs[$key]['catid'];
    $enjoynum = isset($rs[$key]['digg']) ? $rs[$key]['digg'] : 0;
    $catname = $CATEGORYS[$catid]['catname'];
    $caturl = $CATEGORYS[$catid]['url'];
    $list = <<<EOF
<div class="layui-box">
  <div class="layui-actions">
    <a class="layui-thumb" href="{$rs[$key]['url']}" target="_blank"><img lay-src="{$thumb}" alt="{$rs[$key]['title']}" /></a>
    <div class="layui-infos">
     <div class="layui-digg"><i class="layui-heart"></i><span class="layui-badge">{$enjoynum}人喜欢</span></div>
     <div class="layui-type"><i class="layui-icon">&#xe7a0;</i><span class="layui-badge"><a href="{$caturl}" target="_blank">{$catname}</a></span></div>
    </div>  
  </div>
  <div class="layui-stats">
    <div class="layui-tips">
      <div class="layui-piccount"><i class="layui-icon">&#xe64a;</i><span class="layui-badge layui-count" data-num="{$picnum}">{$picnum}P</span></div>
      <div class="layui-posttime"><i class="layui-icon">&#xe609;</i><span class="layui-badge layui-date">{$inputtime}</span></div>
    </div>
   	<div class="layui-title">
      <h2><a href="{$rs[$key]['url']}" title="{$rs[$key]['title']}" target="_blank">{$rs[$key]['title']}</a></h2>
    </div>
  </div>
</div>
EOF;
  $data['list'][$key] = htmlspecialchars($list);
  }
}else{
  $data['code'] = 0;
  $data['msg'] = '数据获取失败，请稍后再试！';
}

echo json_encode($data, JSON_FORCE_OBJECT);
?>

然后时我们的首页模板文件，基本没动

{template "content","header"}
<div class="layui-warp">
  {pc:get sql="select a.*,b.id,b.pictureurls from phpcms_picture as a left join phpcms_picture_data as b on a.id=b.id where a.status = 99 order by inputtime desc" num="30"}
  <div id="masonry" class="container-fluid">
    {loop $data $r}
    <div class="layui-box">
      <div class="layui-actions">
        <a class="layui-thumb" href="{$r[url]}" target="_blank"><img lay-src="{$r[thumb]}?x-oss-process=style/midpic" alt="{$r[title]}" /></a>
        <div class="layui-infos">
          {php $enjoynum = isset($r['digg']) ? $r['digg'] : 0;}
          <div class="layui-digg"><i class="layui-heart"></i><span class="layui-badge">{$enjoynum}人喜欢</span></div>
          <div class="layui-type"><i class="layui-icon">&#xe857;</i><span class="layui-badge"><a href="{$CATEGORYS[$r[catid]][url]}" target="_blank">{$CATEGORYS[$r[catid]][catname]}</a></span></div>
        </div>  
      </div>
      <div class="layui-stats">
        <div class="layui-tips">
          {php $picnum = count(json_decode($r[pictureurls], true));}
          <div class="layui-piccount"><i class="layui-icon">&#xe64a;</i><span class="layui-badge layui-count" data-num="{$picnum}">{$picnum}P</span></div>
          <div class="layui-posttime"><i class="layui-icon">&#xe609;</i><span class="layui-badge layui-date">{date("Y-m-d", $r[inputtime])}</span></div>
        </div>
        <div class="layui-title">
          <h2><a href="{$r[url]}" title="{$r[title]}" target="_blank">{$r[title]}</a></h2>
        </div>
      </div>
    </div>
    {/loop}
  </div>
  {/pc}
</div>
<div class="layui-link">
  <div class="layui-linkbar">
	<div class="layui-badge"><i class="layui-icon">&#xe64c;</i><h3>友情链接</h3></div>
  </div>
  {pc:get sql="select * from phpcms_link where passed=1 order by listorder|addtime asc" num="20"}
  <div class="layui-linklist">
  	{loop $data $r}
  	<a href="{$r[url]}" target="_blank">{$r[name]}</a>
  	{/loop}
  </div>
  {/pc}
</div>
<script type="text/javascript" src="{LAYUI_PATH}index.js"></script>
<script type="text/javascript" src="{LAYUI_PATH}uaredirect.js"></script>
{template "content","footer"}

最后是我的js文件

layui.use(['flow','jquery'], function(){
  var $ = layui.jquery;
  var flow = layui.flow;
  flow.load({
    elem: '#masonry'
    ,isAuto: false
    ,isLazyimg: true
    ,end: '更多图片请查看分类'
    ,done: function(page, next){
      setTimeout(function(){
      var lis = [];
      $.get('/api.php?op=ajax_append&modelid=3&p='+page, function(res){
        var data=eval("("+res+")");
        if(data.code == 1){ 
          var arr = Object.keys(data.list);
          for(var i = 0; i < arr.length; i++){   
            var str = data.list[i];
            str = str.replace(/&amp;/g, '&'); 
            str = str.replace(/&lt;/g, '<');
            str = str.replace(/&gt;/g, '>');
            //str = str.replace(/&quot;/g, "''");  
            str = str.replace(/&#039;/g, "'");
            str = str.replace(/&quot;/g, "\""); 
            lis.push(str);       	
          }
          next(lis.join(''), page < data.pagetotal);
        }else{
          return false;
        }
      });
   	  },500);
    }
  });
});