困难是动摇者和懦夫掉队回头的便桥；但也是勇敢者前进的脚踏石。我不识何谓君子，但看每事肯吃亏者便是；我不识何谓小人，但看每事好占便宜者便是。
效果图
加载更多按钮
一,模板上要引入jq文件
<script language="JavaScript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jQuery.js"></script>
二,模板
<div class="xl12 xm8 xb8 over-hidden">
<!-- 切换标签 -->
<style type="text/css">
.slideTxtBox{ width:100%; text-align:left; }
.slideTxtBox .hd{ height:38px; line-height:27px; position:relative; overflow:hidden }
.slideTxtBox .hd ul{left:10px; float:left; position:absolute; top:3px; height:39px;width:120%;}
.slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer; }
.slideTxtBox .hd ul li.on{background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x;color:red }
.slideTxtBox .bd ul{ zoom:1;padding-bottom:50px;display:none;position:relative;}
.slideTxtBox .bd li{ height:24px; line-height:24px; }
#dede_qrcode_frame{ display:none;z-index:5;position:absolute;top:-117px;left:-40px ;}
</style>
<div id="slideTxtBox"class="slideTxtBox l-padding00"style="overflow:visible !important;">
<div class="hd bg-main">
<ul id="tab"class="border-top border-main border-big">
<li class="on">全部</li>
<li>商会</li></ul>
</div><br/>
<div class="bd"id="slideTxtBox-bd">
<ul id="all" class="show">
{dede:arclist row='9' titlelen='100'titlelen='100' orderby='id' }
<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 list2 width-100 ib pr"id="list">
<div class="xl4 padding20 l-padding00">
<span class="pr ib "><a target="_blank" class="width-100" rel="nofollow noopener noreferrer" href="[field:arcurl/]">
<img src="[field:litpic/]" width="100%"class="width-100" alt="[field:title/]">
</a>
<!-- 微博微信 -->
<span class="left0 bottom0 height40 bgt30 width-100 text-fff text-small"id="shares" style="display:none ;">
<a class="xl-textshare cursor votenums" rel="nofollow noopener noreferrer" href="http://v.t.sina.com.cn/share/share.php?title=[field:title/] [field:global.cfg_basehost/][field:arcurl/]"></a>
<span class="line-share"></span>
<span class="wx-textshare pr">
<a class="z-index5 top0 left0" id='__dedeqrcode_1'></a>
<script type="text/javascript">
var __dedeqrcode_id=1;
var __dedeqrcode_aid=[field:id/];
var __dedeqrcode_type='arc';
var __dedeqrcode_dir='[field:global.cfg_basehost/]/plus';
</script>
<script language="javascript" type="text/javascript" src="/plus/img/qrcode.js"></script></a>
</span>
</span>
<!-- 微信 -->
</span></div>
<div class="xl8 padding-top20 l-padding-top00 ">
<p><a target="_blank" rel="nofollow noopener noreferrer" href="[field:arcurl/]"><span class="text-22 l-text-18 bl"rel="nofollow noopener noreferrer" href="[field:arcurl/]">[field:title/]</span></a></p>
</div>
</div>
{/dede:arclist}
<p class="text-center margin-top bottom0 right300 width100 l-right100"><a rel="nofollow noopener noreferrer" href="javascript：" class="button radius-rounded border-main"id="alldata">加载更多</a></p>
</ul>
<!-- 商会 -->
<ul id="sh">
{dede:arclist row='9' titlelen='100'typeid=1 orderby='id' }
<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 list2 width-100 ib pr"id="list">
<div class="xl4 padding20 l-padding00">
<span class="pr ib ">
<a target="_blank" class="width-100" rel="nofollow noopener noreferrer" href="[field:arcurl/]">
<img src="[field:litpic/]" width="100%"class="width-100" alt="[field:title/]">
</a>
<!-- 微信 -->
<!-- 微信 -->
</span></div>
<div class="xl8 padding-top20 l-padding-top00 ">
<p><a target="_blank" rel="nofollow noopener noreferrer" href="[field:arcurl/]"><span class="text-22 l-text-18 bl"rel="nofollow noopener noreferrer" href="[field:arcurl/]">[field:title/]</span></a></p>
</div>
</div>
{/dede:arclist}
<p class="text-center margin-top bottom0 right300 width100 l-right100"><a rel="nofollow noopener noreferrer" href="javascript：" class="button radius-rounded border-main"id="shdata">加载更多</a></p>
</ul>
</div>
</div>
<!-- slideTxtBox end -->
<script type="text/javascript">
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;i<tabs.length;i++)
{
if(tabs[i]==obj){
tabs[i].className="on";
divs[i].className="show";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>
<script type="text/javascript">
var loadConfig = {
url_api:'/plus/list.php',
//typeid:{dede:field name="typeid"/},
pagesize:9,
loading : 0
}
var page=2;
var allpage=2;
var shpage=2;
function loadMoreApply(typeid,orderby,toid){
eval(" page ="+toid+"page;");
var pagesize = loadConfig.pagesize;
var url = loadConfig.url_api,
data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};
function ajax(url, data) {
$.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {
addContent(data,toid);
}});
}
ajax(url,data);
}
function addContent (rs,toid){
if(rs.statu== 1){
var data = rs.list;
var total = rs.total;
var arr=[];
var length = data.length;
for(var i=0;i<length;i++){
arr.push('<div class="bg-fff margin-big-bottom l-margin-bottom0 l-margin-top12 ib list2" id="list">');
arr.push('<div class="xl4 padding20 l-padding00"><span class="pr ib "><a target="_blank" class="width-100" rel="nofollow noopener noreferrer" href="'+data[i].arcurl+'"><img src="'+data[i].picname+'" width="100%"class="width-100" alt="'+data[i].title+'"></a><span class="left0 top0 ib padding-top2 padding-bottom2 padding-left10 padding-right10 bg-main text-fff text-small">'+data[i].typename+'</span><span class="left0 bottom0 height40 bgt30 width-100 text-fff text-small"id="shares" style="display:none ;"><a class="xl-textshare cursor votenums" rel="nofollow noopener noreferrer" href="http://v.t.sina.com.cn/share/share.php?title='+data[i].title+'{dede:global.cfg_basehost/}'+data[i].arcurl+'"></a><span class="line-share"></span><span class="wx-textshare pr"><a class="z-index5 top0 left0" id="__dedeqrcode_1"></a>');
var __dedeqrcode_id=1;
var __dedeqrcode_aid=data[i].id;
var __dedeqrcode_type='arc';
var __dedeqrcode_dir='{dede:global.cfg_basehost/}/plus';
//arr.push("<ins style=\&;display:inline-table;border:none;margin:0;padding:0;position:relative;visibility:visible;width:100%\&;>");
var dedeqrcodeLink = document.getElementById('__dedeqrcode_'+__dedeqrcode_id);
dedeqrcodeLink.style.display = 'none';
var randNum = Math.floor(Math.random() * 2147483648).toString(36);
var __dedeqrcode_src = "\&;"+__dedeqrcode_dir+"/qrcode.php?id="+__dedeqrcode_aid+"&type="+__dedeqrcode_type+"\&;";
arr.push(" <span id=\&;__bfzInc_"+randNum+"\&; style=\&;display:block;border:none;margin:0;padding:0;position:relative;visibility:visible;width:100%\&;>");
arr.push("<iframe id=\&;dede_qrcode_frame\&; name=\&;dede_qrcode_frame\&; width=\&;260\&; height=\&;280\&; frameborder=\&;0\&; src="+__dedeqrcode_src+" marginwidth=\&;0\&; marginheight=\&;0\&; vspace=\&;0\&; hspace=\&;0\&; allowtransparency=\&;true\&; scrolling=\&;no\&; allowfullscreen=\&;true\&;></iframe>");
//arr.push(" </ins>");
arr.push("</span>");
arr.push('</a></span></span></span></div>');
arr.push('<div class="xl8 padding-top20 l-padding-top00"><p><a target="_blank" rel="nofollow noopener noreferrer" href="'+data[i].arcurl+'"><span class="text-22 l-text-18 bl"rel="nofollow noopener noreferrer" href="'+data[i].arcurl+'">'+data[i].title+'</span></a></p>');
arr.push('<p class="text-left hidden-l "><a class="text-555" rel="nofollow noopener noreferrer" href="'+data[i].arcurl+'">'+data[i].info+'</a></p>');
arr.push('<span class="bottom10 l-bottom-5 right10 ib height30 text-12"style="color:#999">');
arr.push('<span title="'+data[i].stime+'">'+data[i].timeago+'</span> ');
arr.push('<span class="b-border-right"><span class="cursor icon-click"> </span>'+data[i].click+' </span>');
arr.push('<span class="hidden-l" id="diggNum'+data[i].id+'"> <a class=" text-bbb text-16"rel="nofollow noopener noreferrer" href="javascript：" onclick="javascript：postDigg(\&;good\&;,'+data[i].id+');"><span id="digg'+data[i].id+'" class="icon-heart2"> </span> </a>'+data[i].goodpost+'</span>');
arr.push('<a class="hidden-l"rel="nofollow noopener noreferrer" href="/plus/stow.php?aid='+data[i].id+'&type=sys"title="收藏" target="_blank"> <span class="border-right"></span> <span class="icon-star2 cursor ib height22 width22"> </span></a>');
arr.push('</span>');
arr.push('</div></div>');}
$('#'+toid).append(arr.join(''));
loadConfig.load_num = rs.load_num;
if(total<page*loadConfig.pagesize || page> loadConfig.load_num){
//$('#'+toid).append('<p class="text-center margin-top"><a rel="nofollow noopener noreferrer" href="javascript：" class="button radius-rounded border-main width-20"id="'+toid+'data">没有了!</a></p>');
$("#"+toid+"data").html('没有了!');
}else{
//$('#'+toid).append('<p class="text-center margin-top"><a rel="nofollow noopener noreferrer" href="javascript：" class="button radius-rounded border-main width-20"id="'+toid+'data">加载更多</a></p>');
}
eval(toid+"page ++;");
}
add_winxin();
add_share();
}
$("#alldata").click(function() {
loadMoreApply(0,1,'all');//all
});
$("#shdata").click(function() {
loadMoreApply(1,1,'sh');//商会
//$(this).parent('p').remove();
});
$(document).ready(function(){
add_winxin();
add_share();
});
function add_winxin(){
$("#slideTxtBox-bd #list").hover(function() {
$(this).find("#shares").show();
},function(){
$(this).find("#shares").hide();
});
}
function add_share(){
$("#list .wx-textshare").hover(function() {
$(this).find("#dede_qrcode_frame").show();
},function(){
$(this).find("#dede_qrcode_frame").hide();
});
}
</script>
三,修改,plus/list.PHP 在require_once(dirname(__FILE__)."/../include/common.inc.php");
的下面增加一段
if(isset($_GET['ajax'])){
$typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//传递过来的分类ID
$orderby = isset($_GET['orderby']) ? intval($_GET['orderby']): 1;
//print_r($orderby);exit;
//1id排,2hot排序
$page = isset($_GET['page']) ? intval($_GET['page']): 0;//页码
$pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 10;//每页多少条，也就是一次加载多少条数据
$start = $page>0 ? ($page-1)*$pagesize : 0;//数据获取的起始位置。即limit条件的第一个参数。
$ntime2 = gmmktime(0, 0, 0, gmdate('m'), gmdate('d'), gmdate('Y'));
$limitday = $ntime2 - (40 * 24 * 3600);//40天内热文
$orwheres = " a.senddate > $limitday ";
//$typesql = $typeid ? " WHERE typeid=$typeid" : '';
if($orderby==1){//id降序
$typesql = $typeid ? " WHERE typeid=$typeid" : '';
} else{//hot排序
$typesql = $typeid ? " WHERE typeid=".$typeid." and ".$orwheres : " WHERE ".$orwheres;
}
//这个是用于首页实现瀑布流加载，
//因为首页加载数据是无需分类的，所以要加以判断，如果无需
$total_sql = "SELECT COUNT(id) as num FROM `dede_archives` $typesql ";
$temp = $dsql->GetOne($total_sql);
$total = 0;//数据总数
$load_num =0;
if(is_array($temp)){
$load_num= round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了
$total = $temp['num'];
}
if($orderby==1){//新
$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";
}else{//热门
$sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY click DESC LIMIT $start,$pagesize";
}
//echo "$sql";exit;
$dsql->SetQuery($sql);
$dsql->Execute('list');
$statu = 0;//是否有数据，默认没有数据
$data = array();
$index = 0;
while($row = $dsql->GetArray("list")){
$row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],250);
$row['id'] = $row['id'];
$row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
$row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
$row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
if($row['litpic'] == '-' || $row['litpic'] == ''){
$row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
}
if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
$row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
}
$row['picname'] = $row['litpic'];//缩略图
$row['writer'] = $row['writer'];
$row['click'] = $row['click'];
$row['stime'] = GetDateMK($row['pubdate']);
$row['timeago']= timeago($row['pubdate']);
$row['typelink'] = "<a rel="nofollow noopener noreferrer" href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链
$row['fulltitle'] = $row['title'];//完整的标题
$row['shorttitle'] = $row['shorttitle'];//副标题
$row['title'] = cn_substr($row['title'], 60);//截取后的标题
$data[$index] = $row;
$index++;
}
if(!empty($data)){
$statu = 1;//有数据
}
$result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
echo json_encode($result);//返回数据
exit();
}
到此这篇关于织梦首页列表页,javascript ajax加载更多,瀑布流,首页多栏目切换就介绍到这了。青春——人的一生中最美好年岁。它是一个人的生命含苞待放的时期，生机勃发朝气蓬勃；它意味着进取，意味着上升，蕴含着巨大希望的未知数。更多相关织梦首页列表页,javascript ajax加载更多,瀑布流,首页多栏目切换内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
