模板制作修改 Discuz官方图片区瀑布流的x2.5修改方法

  [复制链接]
ARCHY明星会员实名认证 发表于 2012-4-17 16:54:30 [模板制作修改] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
看见官方区很多同学都问其他模板里面可以使用discuz官方图片区瀑布流吗?答案是可以的,下载我们分享下X2.5修改和实现的方法

一、打开你使用的模板下common目录中的common.css或者extend_common.css,在最下面添加
  1. /* 瀑布流布局 by Pony 站帮网(www.zhanhelp.com)提供 */
  2. .waterfall { position: relative; margin-top: 15px; }
  3.         .waterfall li { margin: 0 10px 10px 0; padding: 0 0 3px; text-align: left; border-width: 1px 0 0; border-top: 1px solid #EAEAEA; background: url({STYLEIMGDIR}/bg_waterfall.png) no-repeat 100% 100%; }
  4.         .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
  5.                 .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
  6.                 .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
  7.         .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
  8.                 .waterfall .auth img { display: inline-block; margin: 0 1px; }
复制代码
二、打开使用模板中的forum目录下的forumdisplay_list.htm文件,查找代码
  1. <ul class="ml mlt mtw cl">
  2.                                                         <!--{loop $_G['forum_threadlist'] $key $thread}-->
  3.                                                         <!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
  4.                                                                 <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
  5.                                                                         <!--{eval $thread[tid]=$thread[closed];}-->
  6.                                                                 <!--{/if}-->
  7.                                                         <!--{/if}-->
  8.                                                         <li style="width:{$_G[setting][forumpicstyle][thumbwidth]}px;">
  9.                                                                 <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
  10.                                                                         <div style="position: absolute;padding:2px;background:#FFF">
  11.                                                                         <!--{if $thread['fid'] == $_G[fid]}-->
  12.                                                                                 <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
  13.                                                                                         <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
  14.                                                                                 <!--{else}-->
  15.                                                                                         <input type="checkbox" disabled="disabled" />
  16.                                                                                 <!--{/if}-->
  17.                                                                         <!--{else}-->
  18.                                                                                 <input type="checkbox" disabled="disabled" />
  19.                                                                         <!--{/if}-->
  20.                                                                         </div>
  21.                                                                 <!--{/if}-->
  22.                                                                 <div class="c cl">
  23.                                                                         <a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra" {if $thread['isgroup'] == 1 || $thread['forumstick'] || CURMODULE == 'guide'} target="_blank"{else} onclick="atarget(this)"{/if} title="$thread[subject]" class="z">
  24.                                                                                 <!--{if $thread['cover']}-->
  25.                                                                                         <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" height="{$_G[setting][forumpicstyle][thumbheight]}" />
  26.                                                                                 <!--{else}-->
  27.                                                                                         <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbheight]}px;"></span>
  28.                                                                                 <!--{/if}-->
  29.                                                                         </a>
  30.                                                                 </div>
  31.                                                                 <h3 class="ptn" style="width: {$_G[setting][forumpicstyle][thumbwidth]}px;">
  32.                                                                         <!--{hook/forumdisplay_thread $key}-->
  33.                                                                         <!--{if in_array($thread['displayorder'], array(1, 2, 3, 4))}--><em class="sum pin">{lang thread_stick}</em> <!--{/if}--><!--{if in_array($thread['digest'], array(1, 2, 3))}--><em class="sum digest">{lang thread_digest}</em> <!--{/if}--><a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra"$thread[highlight]{if $thread['isgroup'] == 1 || $thread['forumstick']} target="_blank"{else} onclick="atarget(this)"{/if} title="$thread[subject]">$thread[subject]</a>
  34.                                                                 </h3>
  35.                                                                 <div class="cl">
  36.                                                                         <!--{hook/forumdisplay_author $key}-->
  37.                                                                         <!--{if $thread['cover']}--><em class="sum y xs0 xi1 xw1" title="$thread[cover] {lang pics}">$thread[cover]</em><!--{/if}-->
  38.                                                                         <!--{if $thread['authorid'] && $thread['author']}-->
  39.                                                                                 <a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
  40.                                                                         <!--{else}-->
  41.                                                                                 $_G[setting][anonymoustext]
  42.                                                                         <!--{/if}-->
  43.                                                                 </div>
  44.                                                                 <div class="cl">
  45.                                                                         <em class="y xs0"><a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" class="xi2" title="$thread[replies] {lang reply}">$thread[replies]</a> / <em title="{if $thread['isgroup'] != 1}$thread[views]{else}{$groupnames[$thread[tid]][views]}{/if} {lang show}"><!--{if $thread['isgroup'] != 1}-->$thread[views]<!--{else}-->{$groupnames[$thread[tid]][views]}<!--{/if}--></em></em>
  46.                                                                         <em class="xs0{if $thread['istoday']} xi1{/if}">$thread[dateline]</em>
  47.                                                                 </div>
  48.                                                         </li>
  49.                                                         <!--{/loop}-->
  50.                                                 </ul>
复制代码
修改代替为
  1. <ul id="waterfall" class="ml waterfall cl">
  2.                                                         <!--{loop $_G['forum_threadlist'] $key $thread}-->
  3.                                                         <!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
  4.                                                                 <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
  5.                                                                         <!--{eval $thread[tid]=$thread[closed];}-->
  6.                                                                 <!--{/if}-->
  7.                                                         <!--{/if}-->
  8.                                                         <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
  9.                                                         <li style="width:{$waterfallwidth}px;">
  10.                                                                 <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
  11.                                                                         <div style="position:absolute;margin:1px;padding:2px;background:#FFF">
  12.                                                                         <!--{if $thread['fid'] == $_G[fid]}-->
  13.                                                                                 <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
  14.                                                                                         <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
  15.                                                                                 <!--{else}-->
  16.                                                                                         <input type="checkbox" disabled="disabled" />
  17.                                                                                 <!--{/if}-->
  18.                                                                         <!--{else}-->
  19.                                                                                 <input type="checkbox" disabled="disabled" />
  20.                                                                         <!--{/if}-->
  21.                                                                         </div>
  22.                                                                 <!--{/if}-->
  23.                                                                 <div class="c cl">
  24.                                                                         <a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra" {if $thread['isgroup'] == 1 || $thread['forumstick'] || CURMODULE == 'guide'} target="_blank"{else} onclick="atarget(this)"{/if} title="$thread[subject]" class="z">
  25.                                                                                 <!--{if $thread['cover']}-->
  26.                                                                                         <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
  27.                                                                                 <!--{else}-->
  28.                                                                                         <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
  29.                                                                                 <!--{/if}-->
  30.                                                                         </a>
  31.                                                                 </div>
  32.                                                                 <h3 class="xw0">
  33.                                                                         <!--{hook/forumdisplay_thread $key}-->
  34.                                                                         <a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra"$thread[highlight]{if $thread['isgroup'] == 1 || $thread['forumstick']} target="_blank"{else} onclick="atarget(this)"{/if} title="$thread[subject]">$thread[subject]</a>
  35.                                                                 </h3>
  36.                                                                 <div class="auth cl">
  37.                                                                         <cite class="xg1 y">
  38.                                                                                 {echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
  39.                                                                                  &nbsp; {lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
  40.                                                                         </cite>
  41.                                                                         <!--{hook/forumdisplay_author $key}-->
  42.                                                                         <!--{if $thread['authorid'] && $thread['author']}-->
  43.                                                                                 <a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
  44.                                                                         <!--{else}-->
  45.                                                                                 $_G[setting][anonymoustext]
  46.                                                                         <!--{/if}-->
  47.                                                                 </div>
  48.                                                         </li>
  49.                                                         <!--{/loop}-->
  50.                                                 </ul>
  51.                                                 <div id="tmppic" style="display: none;"></div>
  52.                                                 <script type="text/javascript" src="static/js/redef.js?{VERHASH}"></script>
  53.                                                 <script type="text/javascript" reload="1">
  54.                                                 var wf = {};

  55.                                                 _attachEvent(window, "load", function () {
  56.                                                         if($("waterfall")) {
  57.                                                                 wf = waterfall();
  58.                                                         }

  59.                                                         <!--{if $page < $_G['page_next'] && !$subforumonly}-->
  60.                                                                 var page = $page + 1,
  61.                                                                         maxpage = $page + 10,
  62.                                                                         stopload = 0,
  63.                                                                         scrolltimer = null,
  64.                                                                         tmpelems = [],
  65.                                                                         tmpimgs = [],
  66.                                                                         markloaded = [],
  67.                                                                         imgsloaded = 0,
  68.                                                                         loadready = 0,
  69.                                                                         showready = 1,
  70.                                                                         nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd[ page]}&page=',
  71.                                                                         wfloading = "<img src="{IMGDIR}/loading.gif" alt="" width="16" height="16" class="vm" /> 加载中...",
  72.                                                                         pgbtn = $("pgbtn").getElementsByTagName("a")[0];

  73.                                                                 function loadmore() {
  74.                                                                         var url = nxtpgurl + page + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
  75.                                                                         var x = new Ajax("HTML");
  76.                                                                         x.get(url, function (s) {
  77.                                                                                 s = s.replace(/\n|\r/g, "");
  78.                                                                                 if(s.indexOf("id="pgbtn"") == -1) {
  79.                                                                                         $("pgbtn").style.display = "none";
  80.                                                                                         stopload++;
  81.                                                                                         window.onscroll = null;
  82.                                                                                 }

  83.                                                                                 s = s.substring(s.indexOf("<ul id="waterfall""), s.indexOf("<div id="tmppic""));
  84.                                                                                 s = s.replace("id="waterfall"", "");
  85.                                                                                 $("tmppic").innerHTML = s;
  86.                                                                                 loadready = 1;
  87.                                                                         });
  88.                                                                 }

  89.                                                                 window.onscroll = function () {
  90.                                                                         if(scrolltimer == null) {
  91.                                                                                 scrolltimer = setTimeout(function () {
  92.                                                                                         try {
  93.                                                                                                 if(page < maxpage && stopload < 2 && showready && ((document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight + 500) >= document.documentElement.scrollHeight) {
  94.                                                                                                         pgbtn.innerHTML = wfloading;
  95.                                                                                                         loadready = 0;
  96.                                                                                                         showready = 0;
  97.                                                                                                         loadmore();
  98.                                                                                                         tmpelems = $("tmppic").getElementsByTagName("li");
  99.                                                                                                         var waitingtimer = setInterval(function () {
  100.                                                                                                                 stopload >= 2 && clearInterval(waitingtimer);
  101.                                                                                                                 if(loadready && stopload < 2) {
  102.                                                                                                                         if(!tmpelems.length) {
  103.                                                                                                                                 page++;
  104.                                                                                                                                 pgbtn.href = nxtpgurl + page;
  105.                                                                                                                                 pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
  106.                                                                                                                                 showready = 1;
  107.                                                                                                                                 clearInterval(waitingtimer);
  108.                                                                                                                         }
  109.                                                                                                                         for(var i = 0, j = tmpelems.length; i < j; i++) {
  110.                                                                                                                                 if(tmpelems[i]) {
  111.                                                                                                                                         tmpimgs = tmpelems[i].getElementsByTagName("img");
  112.                                                                                                                                         imgsloaded = 0;
  113.                                                                                                                                         for(var m = 0, n = tmpimgs.length; m < n; m++) {
  114.                                                                                                                                                 tmpimgs[m].onerror = function () {
  115.                                                                                                                                                         this.style.display = "none";
  116.                                                                                                                                                 };
  117.                                                                                                                                                 markloaded[m] = tmpimgs[m].complete ? 1 : 0;
  118.                                                                                                                                                 imgsloaded += markloaded[m];
  119.                                                                                                                                         }
  120.                                                                                                                                         if(imgsloaded == tmpimgs.length) {
  121.                                                                                                                                                 $("waterfall").appendChild(tmpelems[i]);
  122.                                                                                                                                                 wf = waterfall({
  123.                                                                                                                                                         "index": wf.index,
  124.                                                                                                                                                         "totalwidth": wf.totalwidth,
  125.                                                                                                                                                         "totalheight": wf.totalheight,
  126.                                                                                                                                                         "columnsheight": wf.columnsheight
  127.                                                                                                                                                 });
  128.                                                                                                                                         }
  129.                                                                                                                                 }
  130.                                                                                                                         }
  131.                                                                                                                 }
  132.                                                                                                         }, 40);
  133.                                                                                                 }
  134.                                                                                         } catch(e) {}
  135.                                                                                         scrolltimer = null;
  136.                                                                                 }, 320);
  137.                                                                         }
  138.                                                                 };
  139.                                                         <!--{/if}-->
  140.                                                 });
  141.                                                 </script>
复制代码

三、把2个修改好的文件上传覆盖
,然后下载附件redef.rar redef.rar (1.12 KB, 下载次数: 642)




上一篇:Discuz! X2.0设置用户组图标后好友列表错位问题的解决办法
下一篇:discuz x2 关联链接原理分理

大神点评90

北北″ 发表于 2012-4-17 17:09:27 [模板制作修改] 显示全部楼层
沙发
xyrens 发表于 2012-4-17 17:10:27 [模板制作修改] 显示全部楼层
板凳 顶。。。
花到飞靡 发表于 2012-4-17 17:19:36 [模板制作修改] 显示全部楼层
支持了~~~~~~~~~~~~~~~
破布 发表于 2012-4-17 17:44:05 [模板制作修改] 显示全部楼层
本帖最后由 破布 于 2012-4-17 17:48 编辑

默认模版有问题,不自动排序
tongliga 发表于 2012-4-17 17:53:36 [模板制作修改] 显示全部楼层
来学习了
若有爱 发表于 2012-4-17 18:21:51 [模板制作修改] 显示全部楼层
不用清析版也能用?
若有爱 发表于 2012-4-17 18:23:32 [模板制作修改] 显示全部楼层
能不能做成插件
zhujun52000 发表于 2012-4-18 09:14:15 [模板制作修改] 显示全部楼层
牛啊
破布 发表于 2012-4-18 11:51:49 [模板制作修改] 显示全部楼层
翻页问题怎么处理呀
故城论坛 发表于 2012-4-19 23:14:10 [模板制作修改] 显示全部楼层
周耀龙 发表于 2012-4-20 17:31:42 [模板制作修改] 显示全部楼层
二〇一二年四月二十日 17:32:10,学习到了
ghcg3d6exk 发表于 2012-4-22 01:27:56 [模板制作修改] 显示全部楼层
来了,先看看
投机 发表于 2012-4-22 21:02:27 [模板制作修改] 显示全部楼层
先看看再说
YES玩客-小施 发表于 2012-4-26 21:08:52 [模板制作修改] 显示全部楼层
没有币只能看看
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表