近日看到网上流行的瀑布流,也参照改了下,但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项,直接影响到的是非图片版帖子列表界面,其实没必要把form表单里的所有项都替换,仅替换“else if 图片部分+分页”部分即可。
! P U7 S- m+ M6 s) B为了完整方法跟其他帖写的都一样,为方便新手,操作如下:
3 z+ {4 O# w8 Z r- O
3 V4 j" [) @( i5 w. B
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录,同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
7 [, |5 K& k8 r+ |4 j1 u2、模板目录下增加common\extend_common.css,其内容如下:
9 y4 ~3 r9 V8 z& v- /* 大分页按钮 by Pony 1203121325 */
: A+ J, \% p- F# u - .pgbtn { margin: 5px 0 10px; }
0 M( e' _+ T! f! M( E. J/ ? - .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; }0 Z8 [# }8 _; n& c1 n* u7 J! ]
- .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
O# e# z$ X. c( O. ^, B - .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
+ _9 b S$ L$ }6 B
0 D7 {8 {6 w' W: R: a6 ]- o- /* 瀑布流布局 by Pony 1204121803 */
- |0 E% R O# Z" |/ @( a; d - .waterfall { position: relative; margin-top: 15px; }
3 b. q! h/ A4 R - .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%; }% h i4 J5 t( z$ B) k# o
- .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
; \& Y! y# S( W6 Q3 C; I - .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
; }* c D+ g) a3 N) H - .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
5 q) {: c* f. E6 y3 S# s7 A; L - .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
( Q; W! L$ j* M' H6 ?; ?& d/ y$ e - .waterfall .auth img { display: inline-block; margin: 0 1px; }4 v" Q. v# H' B9 H. O
复制代码3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分(
即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束)。[code]
: b( H; i7 V# m<!--{else}-->
( a F& l# t- R5 }* Q
</table><!-- end of table "forum_G[fid]" branch 2/3 -->
$ s* f% u. M. J0 _& ^9 d5 E% F
<ul id="waterfall" class="ml waterfall cl">
s7 c; x8 G( i; M+ @1 t; J<!--{loop $_G['forum_threadlist'] $key $thread}-->
2 f3 c4 J% V& t F/ u# V# w G<!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
" d R- _$ C) U6 D# Y& p- ]5 j
<!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
4 e4 j [+ b; P8 j" c9 m( i<!--{eval $thread[tid]=$thread[closed];}-->
/ w9 u4 ?0 _9 r% ~9 \0 Y
<!--{/if}-->
( r& G2 Z3 _3 H1 p4 w$ B
<!--{/if}-->
% A* m4 k; R3 c! g1 a* l
<!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
7 x0 B6 P% ]0 E<li style="width:{$waterfallwidth}px;">
( e, e0 `4 K( N+ |<!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
6 W! k6 p' a2 [6 S' H- T
<div style="position:absolute;margin:1px;padding:2px;background:#FFF">
+ P, Q [, |+ T6 J* _
<!--{if $thread['fid'] == $_G[fid]}-->
% ]% @/ N5 f w2 e" `
<!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
5 l4 X4 {, J2 |' }2 J5 c4 c
<input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
' I# H$ G: i' T9 ?5 |* I- C9 r ?
<!--{else}-->
$ p% O: y9 G8 m% w8 G- Q7 a P% i
<input type="checkbox" disabled="disabled" />
D2 u: V% ^& M* r
<!--{/if}-->
& v# ^2 [' z# |9 ^<!--{else}-->
* @4 x, d$ i/ S! A0 L# }) }<input type="checkbox" disabled="disabled" />
h% P+ G& A* q# @<!--{/if}-->
0 O3 Y! t2 @2 J</div>
$ s- j7 `4 o9 }& ]0 U3 _
<!--{/if}-->
: A( s! y' d) N: w" Q0 p/ L
<div class="c cl">
9 Z& t6 K. h7 I8 \- k<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">
# i, V5 ~" B8 d: L" o7 e9 v<!--{if $thread['cover']}-->
( l% ^6 u6 Z7 M& z& P5 |
<img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
% Z0 |; k+ ] y<!--{else}-->
5 ]1 I1 V( ^- k3 t/ i0 B$ r<span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
6 l; W) f" k6 g<!--{/if}-->
! O7 o' U# q7 |3 k0 I; }; X
</a>
* e8 ]# I2 R6 N. b</div>
: J, q" |4 v; v7 g* u F! X<h3 class="xw0">
- x$ B! F- F6 z1 F8 u4 g9 {; M<!--{hook/forumdisplay_thread $key}-->
6 `/ m0 q" n2 t3 k<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>
' G; a7 p2 S& c" w% l
</h3>
) j7 `( Z, m" X( y8 s6 L
<div class="auth cl">
% G9 ~* e' N; V
<cite class="xg1 y">
- |) U, B! P, O) P6 ~
{echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
" O; o9 i; I: z3 ]2 z/ z
{lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
@2 n5 N0 I5 r. x7 v
</cite>
9 c) Y" q$ j$ R3 u( \
<!--{hook/forumdisplay_author $key}-->
~/ F+ T" y6 V& o0 s<!--{if $thread['authorid'] && $thread['author']}-->
* l$ {1 e L1 ^, j9 s2 [" }<a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
: W. c% |1 _0 F/ X. O
<!--{else}-->
" T5 F1 D3 Y# J; e! N s$_G[setting][anonymoustext]
- I( C( U2 [8 T, v; B<!--{/if}-->
5 J- Q9 c2 k8 [6 ~</div>
0 v+ Y& [$ a; z) n/ d. D8 X</li>
6 i$ ]( w) O) Z- Y<!--{/loop}-->
6 u+ [1 l: B1 |7 ?9 r8 E0 _9 T$ \' o</ul>
, e" ?/ k: N( S+ K. u' f6 [2 @
<div id="tmppic" style="display: none;"></div>
" R G5 n! R; F. M3 A9 f<script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
7 N" a% b* i* A( U v<script type="text/javascript" reload="1">
' Y. g9 c# [/ s; h/ `var wf = {};
+ ?$ T& D2 F4 h9 d. `; T
) Q$ t1 D3 \3 u_attachEvent(window, "load", function () {
0 l+ W8 e: t8 nif($("waterfall")) {
. P6 h7 T- a- B4 _! r$ V/ }wf = waterfall();
/ V) Z" J3 K& |4 @}
/ k6 n9 g0 \5 f! \; M/ ?2 S% @( Y+ U$ V) R/ H, o+ S
<!--{if $page < $_G['page_next'] && !$subforumonly}-->
1 t. p; @6 t; j' Q# N: d
var page = $page + 1,
/ D6 a: i: Y$ ]) Z" d# b+ }
maxpage = $page + 10,
% X! ^( G/ K* x' V8 ]0 ^7 gstopload = 0,
% l: a+ l' D( c$ o8 dscrolltimer = null,
5 e) k3 b% P/ ?+ L* G
tmpelems = [],
8 W: i1 f$ f3 I' c+ y9 e: D! s) D
tmpimgs = [],
* w l P; Y3 S
markloaded = [],
8 D- v4 |+ q" ~; y, r+ |, ]imgsloaded = 0,
) B; h0 b6 Q/ s1 W4 T) [
loadready = 0,
; \$ N/ [; p% P2 y5 ?8 Zshowready = 1,
6 C0 R" G7 e5 Mnxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd