黑马模板网专注企业网站模板制作,包括企业pbootcms网站模板,静态网页模板,网站源码下载,HTML网站模板等等。
免责声明:本站所有资源(模板、图片)搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。
想要自己加载得要涉及到PHP+JQ+AJAX:
第一步:新建个php代码get_news_index.php 上传到 /e/action:
<?phprequire('../class/connect.php');require('../class/db_sql.php');require('../data/dbcache/class.php');if($_POST[action] == 'getmorenews'){$table=htmlspecialchars($_POST[table]);if(empty($_POST[orderby])){$orderby='newstime';}else{ $orderby=htmlspecialchars($_POST[orderby]);}if(empty($_POST[myorder])){$myorder='desc';}else{ $myorder='asc';}if(empty($_POST[limit])){$limit=3;}else{ $limit=(int)$_POST[limit];}if(empty($_POST[classid])){$where=null;}else{ $where='where classid in('.$_POST[classid].')';}if(empty($_POST[length])){$length=50;}else{ $length=(int)$_POST[length];}if(empty($_POST[small_length])){$small_length=120;}else{ $small_length=(int)$_POST[small_length];}$link=db_connect();$empire=new mysqlquery();$num =(int)$_POST['next'] *$limit;if($table){$sql=$empire->query("SELECT * FROM `".$dbtbpre."ecms_".$table."` $where order by $orderby $myorder limit $num,$limit");while($r=$empire->fetch($sql)){if($r[titlepic]==''){$r[titlepic]=$public_r[news.url]."e/data/images/notimg.gif";}$oldtitle=stripSlashes($r[title]);$title=sub($oldtitle,'',$length);$smalltext=stripSlashes($r[smalltext]);$smalltext=sub($smalltext,'',$small_length);$classname=$class_r[$r[classid]][classname];$newsurl=$public_r[newsurl];$classurl=$newsurl.$class_r[$r[classid]][classpath];?><article class="excerpt excerpt-one" data-id="<?=$r[classid]?>"><header><a class="cat label label-important" href="<?=$class_r[$r[classid]]['classpath']?> "><?=$class_r[$r[classid]][bname]?><i class="label-arrow"></i></a><h2><a href="<?=$r[titleurl]?>" title="<?=$r[oldtitle]?>"><?=$r[title]?></a></h2><small class="text-muted"><span class="glyphicon glyphicon-picture"></span><?=$r[imgcount]?></small></header><p class="text-muted time"><?=$r[username]?> 发布于 <?=date('Y-m-d',$r[newstime])?></p><p class="focus"><a href="<?=$r[titleurl]?>" class="thumbnail"><img src="<?=$r[titlepic]?>" /></a></p><p class="note"><?=$smalltext?>...</p><p class="text-muted views"><span class="post-views">阅读(<?=$r[onclick]?>)</span><span class="post-comments">评论(<?=$r[plnum]?>)</span><a href="JavaScript:makeRequest('<?=$public_r[news.url]?>e/public/digg?classid=<?=$r[classid]?>&id=<?=$r[id]?>&dotop=1&doajax=1&ajaxarea=diggnum<?=$r[id]?>','EchoReturnedText','GET','');" class="post-like" ><i class="glyphicon glyphicon-thumbs-up"></i>赞 (<span id="diggnum<?=$r[id]?>"><?=$r[diggtop]?></span>)</a><span class="post-tags">标签:<a href="/337/e/tags/?tagname=<?=stripSlashes($r[keyboard])?>" target="_blank" rel="tag" data-original-title><?=stripSlashes($r[keyboard])?></a></span></p></article>//这部分代码添加自己的模板代码<?php}}}db_close();$empire=null;?>
第二步要写js代码 ajaxShow.js:
$(function() {var i =0; //设置当前页数if (!NeuF) var NeuF = {};NeuF.ScrollPage = function (obj, options, callback) {var _defaultOptions = {delay: 500, marginBottom: 200}; //默认配置:延迟时间delay和滚动条距离底部距离marginBottomoptions = $.extend(_defaultOptions, options);this.isScrolling = false; //是否在滚动this.oriPos = 0; //原始位置this.curPos = 0; //当前位置var me = this; //顶层var $obj = (typeof obj == "string") ? $("#" + obj) : $(obj);//绑定滚动事件$obj.scroll(function (ev) {me.curPos = $obj.scrollTop();if ($(window).height() + $(window).scrollTop() >= $(document.body).height() - options.marginBottom) {if (me.isScrolling == true) return;me.isScrolling = true;setTimeout(function () {me.isScrolling = false;}, options.delay); //重复触发间隔毫秒if (typeof callback == "function") callback.call(null, me.curPos - me.oriPos);};me.oriPos = me.curPos;});};$(function () {window.scrollTo(0, 0); //每次F5刷新把滚动条置顶function show() {$.ajax({url: 'http://www.****.com/e/action/get_news_index.php',//自己的域名type: 'POST',data: {"next": i,'table': 'news','action': 'getmorenews','limit': 10,'small_length': 120},dataType: 'html',beforeSend: function () {$("#loadmore").show().html('<img src="/307/skin/ecms103/images/loading.gif"/>正在努力加载中...');$('#loadmore').attr('disabled', 'disabled');},success: function (data) {if (data) {$("#showajaxnews").append(data);$("#loadmore").removeAttr('disabled');$("#loadmore").html('滚动加载更多');i++;} else {$("#loadmore").show().html("已全部加载完毕!");console.log(data);$('#loadmore').attr('disabled', 'disabled');return false;}}});};show();//marginBottom表示滚动条离底部的距离,0表示滚动到最底部才加载,可以根据需要修改new NeuF.ScrollPage(window, {delay: 1000, marginBottom: 0}, function (offset) {if (offset > 0) {setTimeout(show,1000)}});});});
第三步:要在 列表模板文件加入代码:
<div class="" id="showajaxnews"> 列表加载这里面 </div><div class="more" id="loadmore">滚动加载更多</div>
第四步:把more加载样式css加进去
.more{display: inline-block;padding: 10px 80px;text-decoration: none;background-color: #ff5f33;color: #fff !important;border-radius: 50px;text-align: center;margin-bottom: 30px;margin-top: 15px;}
效果图一:
.more{display: none;padding: 10px 0px 25px 0px;font-weight: normal;font-size: 15px;text-align: center;font-size: 12px;color: #ccc;}
效果二:
部分页面需要调整高度下:
<style>html, body {height: auto;}</style>
