首页 › Dedecms论坛 › 织梦模板DEDE首页和列表页AJAX无限加载瀑布流效果

出国留学肖老师 發表於 2024-10-19 00:00:00

织梦模板DEDE首页和列表页AJAX无限加载瀑布流效果

<p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">博客站或者<span style="text-decoration: none;">图片</span>站运用AJAX异步无限加载，做成瀑布流，提高用户体验，这是AJAX异步加载的优点。</p><p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">&nbsp; &nbsp;
        AJAX异步加载的弊端：属于WEB前端技术，蜘蛛不会抓JS调用的内容，也就是并不利于SEO优化。所以要运用这个功能的话最好有一部分直接调用，另一部分采用AJAX异步加载。</p><p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">&nbsp; &nbsp;
        接下来用织梦来做AJAX异步加载WEB前端开发。网上有诸多教程，经过笔者整理，给出详细说明，修正后分享给大家。</p><p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">&nbsp; &nbsp;
        打开/plus/list.php，找到</p><div class="jb51code" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;"><pre class="brush:php;toolbar:false;">require_once(dirname(__FILE__).&quot;/../include/common.inc.php&quot;);</pre></div><p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">&nbsp; &nbsp;
        下面增加代码</p><div class="jb51code" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;"><pre class="brush:php;toolbar:false;">if(isset($_GET[&#39;ajax&#39;])){
$typeid&nbsp;=&nbsp;isset($_GET[&#39;typeid&#39;])&nbsp;?&nbsp;intval($_GET[&#39;typeid&#39;]):&nbsp;0;//传递过来的分类ID
$page&nbsp;=&nbsp;isset($_GET[&#39;page&#39;])&nbsp;?&nbsp;intval($_GET[&#39;page&#39;]):&nbsp;0;//页码
$pagesize&nbsp;=&nbsp;isset($_GET[&#39;pagesize&#39;])&nbsp;?&nbsp;intval($_GET[&#39;pagesize&#39;]):&nbsp;15;//每页多少条，也就是一次加载多少条数据
$start&nbsp;=&nbsp;$page&gt;0&nbsp;?&nbsp;($page-1)*$pagesize&nbsp;:&nbsp;0;//数据获取的起始位置。即limit条件的第一个参数。
$typesql&nbsp;=&nbsp;$typeid&nbsp;?&nbsp;&quot;&nbsp;WHERE&nbsp;typeid=$typeid&quot;&nbsp;:&nbsp;&#39;&#39;;//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需
$total_sql&nbsp;=&nbsp;&quot;SELECT&nbsp;COUNT(id)&nbsp;as&nbsp;num&nbsp;FROM&nbsp;`dede_archives`&nbsp;&nbsp;$typesql&nbsp;&quot;;
$temp&nbsp;=&nbsp;$dsql-&gt;GetOne($total_sql);
$total&nbsp;=&nbsp;0;//数据总数
$load_num&nbsp;=0;
if(is_array($temp)){
$load_num=&nbsp;round(($temp[&#39;num&#39;]-15)/$pagesize);//要加载的次数,因为默认已经加载了
$total&nbsp;=&nbsp;$temp[&#39;num&#39;];
}
$sql&nbsp;=&nbsp;&quot;SELECT&nbsp;a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
t.namerule2,t.ispart,&nbsp;t.moresite,t.siteurl,t.sitepath
FROM&nbsp;`dede_archives`&nbsp;as&nbsp;a&nbsp;JOIN&nbsp;`dede_arctype`&nbsp;AS&nbsp;t&nbsp;ON&nbsp;a.typeid=t.id&nbsp;&nbsp;&nbsp;&nbsp;$typesql&nbsp;ORDER&nbsp;BY&nbsp;id&nbsp;DESC&nbsp;LIMIT&nbsp;$start,$pagesize&quot;;
//echo&nbsp;&quot;$sql&quot;;
$dsql-&gt;SetQuery($sql);
$dsql-&gt;Execute(&#39;list&#39;);
$statu&nbsp;=&nbsp;0;//是否有数据，默认没有数据
$data&nbsp;=&nbsp;array();
$index&nbsp;=&nbsp;0;
while($row&nbsp;=&nbsp;$dsql-&gt;GetArray(&quot;list&quot;)){
$row[&#39;info&#39;]&nbsp;=&nbsp;$row[&#39;info&#39;]&nbsp;=&nbsp;$row[&#39;infos&#39;]&nbsp;=&nbsp;cn_substr($row[&#39;description&#39;],160);
$row[&#39;id&#39;]&nbsp;=&nbsp;&nbsp;$row[&#39;id&#39;];
$row[&#39;filename&#39;]&nbsp;=&nbsp;$row[&#39;arcurl&#39;]&nbsp;=&nbsp;GetFileUrl($row[&#39;id&#39;],
$row[&#39;typeid&#39;],$row[&#39;senddate&#39;],$row[&#39;title&#39;],$row[&#39;ismake&#39;],
$row[&#39;arcrank&#39;],$row[&#39;namerule&#39;],$row[&#39;typedir&#39;],$row[&#39;money&#39;],
$row[&#39;filename&#39;],$row[&#39;moresite&#39;],$row[&#39;siteurl&#39;],$row[&#39;sitepath&#39;]);
$row[&#39;typeurl&#39;]&nbsp;=&nbsp;GetTypeUrl($row[&#39;typeid&#39;],$row[&#39;typedir&#39;],
$row[&#39;isdefault&#39;],$row[&#39;defaultname&#39;],$row[&#39;ispart&#39;],
$row[&#39;namerule2&#39;],$row[&#39;moresite&#39;],$row[&#39;siteurl&#39;],$row[&#39;sitepath&#39;]);
if($row[&#39;litpic&#39;]&nbsp;==&nbsp;&#39;-&#39;&nbsp;||&nbsp;$row[&#39;litpic&#39;]&nbsp;==&nbsp;&#39;&#39;){
$row[&#39;litpic&#39;]&nbsp;=&nbsp;$GLOBALS[&#39;cfg_cmspath&#39;].&#39;/images/defaultpic.gif&#39;;
}
if(!preg_match(&quot;#^http://#i&quot;,&nbsp;$row[&#39;litpic&#39;])&nbsp;&amp;&amp;$GLOBALS[&#39;cfg_multi_site&#39;]&nbsp;==&nbsp;&#39;Y&#39;){
$row[&#39;litpic&#39;]&nbsp;=&nbsp;$GLOBALS[&#39;cfg_mainsite&#39;].$row[&#39;litpic&#39;];
}
$row[&#39;picname&#39;]&nbsp;=&nbsp;$row[&#39;litpic&#39;];//缩略图
$row[&#39;stime&#39;]&nbsp;=&nbsp;GetDateMK($row[&#39;pubdate&#39;]);
$row[&#39;typelink&#39;]&nbsp;=&nbsp;&quot;&quot;.$row[&#39;typename&#39;].&quot;&quot;;//分类链
$row[&#39;fulltitle&#39;]&nbsp;=&nbsp;$row[&#39;title&#39;];//完整的标题
$row[&#39;shorttitle&#39;]&nbsp;=&nbsp;$row[&#39;shorttitle&#39;];//副标题
$row[&#39;title&#39;]&nbsp;=&nbsp;cn_substr($row[&#39;title&#39;],&nbsp;60);//截取后的标题
$data[$index]&nbsp;=&nbsp;$row;
$index++;
}
if(!empty($data)){
$statu&nbsp;=&nbsp;1;//有数据
}
$result&nbsp;=array(&#39;statu&#39;=&gt;$statu,&#39;list&#39;=&gt;$data,&#39;total&#39;=&gt;$total,&#39;load_num&#39;=&gt;$load_num);
echo&nbsp;json_encode($result);//返回数据
exit();
}</pre></div><p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">&nbsp; &nbsp;
        模板文件增加内容</p><p style="margin: 0px; padding: 5px 0px; outline: none; font-size: 14px; line-height: 30px; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;">&nbsp; &nbsp;
        在需要用AJAX异步加载的模板的前增加代码</p><div class="jb51code" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, &quot;Microsoft YaHei&quot;;"><pre class="brush:js;">function&nbsp;ajax(url,&nbsp;data)&nbsp;{
$.ajax({url:&nbsp;url,data:&nbsp;data,async:&nbsp;false,type:&nbsp;&#39;GET&#39;,dataType:&nbsp;&#39;json&#39;,success:&nbsp;function(data)&nbsp;{
addContent(data);
}});
}
ajax(url,data);

function&nbsp;addContent&nbsp;(rs){
if(rs.statu==&nbsp;1){
var&nbsp;data&nbsp;=&nbsp;rs.list;
var&nbsp;total&nbsp;=&nbsp;rs.total;
var&nbsp;arr=[];
var&nbsp;length&nbsp;=&nbsp;data.length;
for(var&nbsp;i=0;i&#39;);
arr.push(&#39;&#39;);</pre></div><p>{dede:arclist row=&#39;3&#39;}</p><p>@me = (empty(@me[&#39;litpic&#39;]) ? &quot;&quot; : &quot;&quot;); &nbsp;</p><p>[]&nbsp;</p><p>&nbsp;&nbsp;</p><p>日期：&nbsp;</p><p>点击：&nbsp;</p><p>好评：&nbsp;</p><p></p><p>{/dede:arclist}</p>

查看完整版本: 织梦模板DEDE首页和列表页AJAX无限加载瀑布流效果