近日看到网上流行的瀑布流,也参照改了下,但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项,直接影响到的是非图片版帖子列表界面,其实没必要把form表单里的所有项都替换,仅替换“else if 图片部分+分页”部分即可。
6 l3 M X) m/ R" }6 Z! X$ \8 M
为了完整方法跟其他帖写的都一样,为方便新手,操作如下:
. J* W% X- z; B5 K! g+ U) R
o$ G5 M0 S( g f* @. E- _1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录,同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
! `/ p0 h( ` ~' L' M) v" a! y; [2、模板目录下增加common\extend_common.css,其内容如下:
1 y9 @' }" e, i( S7 v) f3 h- /* 大分页按钮 by Pony 1203121325 */
7 X& s7 C" k6 f- j9 E/ Q - .pgbtn { margin: 5px 0 10px; }) k0 @: I9 w5 T4 l
- .pgbtn a { display: block; height: 40px; line-height: 40px; letter-spacing: 5px; text-align: center; border: 1px solid #DCDCDC; background: #F5F5F5 url({STYLEIMGDIR}/bg_pgbtn.png) repeat-x 0 0; font-size: 14px; outline: none; border-radius: 5px; box-shadow: 0 1px 0 #F5F5F5; } c/ S1 H0 R% \ _6 a; q) B8 j( g
- .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }% j: P/ K/ a9 W% o+ ?
- .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }2 D! i9 M4 l% A/ p* _9 ]
1 S' \" C# i- D/ B7 K; B- /* 瀑布流布局 by Pony 1204121803 */
7 U( w' O6 q M9 q - .waterfall { position: relative; margin-top: 15px; }* Z* R3 w* N$ Z2 i8 w# @ M7 w
- .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%; }2 N/ R$ l& c) o8 T% |( _% l. A; G3 O
- .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }+ W2 p0 F$ v5 s8 v
- .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
9 O5 ~) @, O5 a$ r& t5 } - .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }( a7 i5 P0 K- A* {
- .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
0 R+ e/ x4 F; ~' ?* e% Z$ T2 } - .waterfall .auth img { display: inline-block; margin: 0 1px; }' y& |5 v/ a* P* p$ l
复制代码3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分(
即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束)。[code]
1 C$ b% s" J$ Y& g$ s; X<!--{else}-->
% y" c8 u( y0 P7 O) T</table><!-- end of table "forum_G[fid]" branch 2/3 -->
2 `& Q0 j- a0 b1 G+ x
<ul id="waterfall" class="ml waterfall cl">
+ Z# e* O" k8 k0 C8 `' i/ M<!--{loop $_G['forum_threadlist'] $key $thread}-->
d2 k+ t2 R% e: K: `3 w& F1 y6 ^
<!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
8 r9 x( x v" ]* y
<!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
% G* q. Z( C8 e) l4 H7 y, \4 N<!--{eval $thread[tid]=$thread[closed];}-->
4 Y7 Z4 U3 {8 v4 Y
<!--{/if}-->
* u+ Z1 r" E3 z* x! Z% w8 c, }
<!--{/if}-->
8 n1 m6 p1 k8 f. g<!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
6 j: }8 N9 }' S7 A5 S# X- ^
<li style="width:{$waterfallwidth}px;">
- r" w! ^7 ?6 X8 a* B- ]9 ^8 U<!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
: ~7 U8 v% ?. R( P) X<div style="position:absolute;margin:1px;padding:2px;background:#FFF">
8 F# b3 Z' q( T0 D; W6 ~" X' B<!--{if $thread['fid'] == $_G[fid]}-->
5 {( y6 `4 y0 k) o$ m
<!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
7 W7 [$ z, r2 p" h* i; u% a* `; d<input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
# }# _3 D" g, ~/ m4 W4 l<!--{else}-->
5 m. c+ [9 Y' G4 m3 J: Q
<input type="checkbox" disabled="disabled" />
' y {& z3 C/ V& {; b% x<!--{/if}-->
) q) |* n5 x& u {% F- ?8 B0 V
<!--{else}-->
8 T. [% j8 n: z
<input type="checkbox" disabled="disabled" />
1 {7 |8 I! O7 W& T8 l4 H2 {$ ]( d1 c% ?
<!--{/if}-->
2 A" y7 G( O# O: s/ B
</div>
0 q5 U1 y7 N/ U
<!--{/if}-->
' j# S5 }# v/ v0 }; W3 ]/ [<div class="c cl">
2 i* @. E) T z' i
<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">
0 y! y7 S8 c" F Q+ J
<!--{if $thread['cover']}-->
. K/ Z) L$ H8 A w/ G/ e
<img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
: {2 O; ~, @: W: {+ E
<!--{else}-->
5 X6 |. M0 k4 a, [ F& p, G<span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
0 R! g3 r3 r! q" f: r<!--{/if}-->
' U$ U5 o, t$ N* P* Q</a>
/ t0 X7 D: Z3 K; f2 ~) M/ U4 H* G9 |</div>
% \% U, y- Z& E4 Z" }
<h3 class="xw0">
# j4 J0 d9 { e2 s$ T/ I, T<!--{hook/forumdisplay_thread $key}-->
. y- z4 I- U: |2 o, L<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>
& V0 k4 V% x8 I( F
</h3>
; V9 f) O3 S2 t, `" Q/ e
<div class="auth cl">
" H( [4 \" Y/ X' Z
<cite class="xg1 y">
, M% C- _5 k% f M3 F2 D' P
{echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
; u5 Y6 {2 D- H% |6 E( [# i
{lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
& n% k; X0 g* n* r* o0 l</cite>
' y/ A/ v' Q( [# y+ i; M% j( o
<!--{hook/forumdisplay_author $key}-->
6 K B8 N5 K& q# I<!--{if $thread['authorid'] && $thread['author']}-->
: q( `/ H- J$ x5 b9 b/ `<a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
$ _7 n! c/ W _: Z: n/ B+ q+ a
<!--{else}-->
5 b& ~2 b0 B* o, a4 R2 o7 ]$_G[setting][anonymoustext]
* P* E6 h9 b( u5 U5 N! o<!--{/if}-->
$ k& U4 G ?/ v0 ?</div>
1 @. H. O: V) H
</li>
: q A2 r/ ? t3 _" E: S0 H4 G<!--{/loop}-->
; X) j4 A' q v, ]& U9 F
</ul>
6 a1 ~ Q8 T; I4 {) \6 P
<div id="tmppic" style="display: none;"></div>
+ }. k5 I# n' a; n( }& Y9 L<script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
' }- b& \, k2 B2 `5 c6 R
<script type="text/javascript" reload="1">
3 q4 ?" J; O/ E/ r% q ~var wf = {};
; a M* G8 o& S0 l' `( X: `
3 b. Q+ X$ S* x7 O# B* O_attachEvent(window, "load", function () {
3 U$ a. U- z, n& T: fif($("waterfall")) {
5 X o5 [/ j% k1 L( { P/ G0 O% E$ cwf = waterfall();
* Z3 M( b4 a+ t0 e2 N1 ?% d}
! v# Q" X- {* ?; B9 m
9 [+ X* n9 b# }
<!--{if $page < $_G['page_next'] && !$subforumonly}-->
: O D+ F' z5 e5 F* ]
var page = $page + 1,
$ p4 B2 S" I; L: b6 m. e
maxpage = $page + 10,
' V* ^) W* v! V# o- C/ _ c! wstopload = 0,
7 u& i% a, M; X" e/ j# @ V
scrolltimer = null,
# y7 b( _7 x5 }1 X
tmpelems = [],
$ T. H8 K( y& }0 Z7 ^$ [) Ztmpimgs = [],
) b# `. F7 p- b* B% }4 tmarkloaded = [],
- x/ u- v2 A* s' N7 J$ _6 b
imgsloaded = 0,
H+ e# e8 {$ a1 ~9 T9 F O# Z* {
loadready = 0,
4 e [/ Z: F* `3 {' b p9 Tshowready = 1,
6 h1 C% b H8 ]: ?4 y( _, rnxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd