近日看到网上流行的瀑布流,也参照改了下,但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项,直接影响到的是非图片版帖子列表界面,其实没必要把form表单里的所有项都替换,仅替换“else if 图片部分+分页”部分即可。
: p1 n& c; i0 Z9 q+ o% ]+ g- I
为了完整方法跟其他帖写的都一样,为方便新手,操作如下:
; k1 u* \; _- \! b8 F
$ F* L- f4 g9 P" G
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录,同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
2 U1 n) P( P- @: B$ h2、模板目录下增加common\extend_common.css,其内容如下:
2 x5 Y" q! P* X& D- /* 大分页按钮 by Pony 1203121325 */. H8 a$ ] [4 c ~6 A
- .pgbtn { margin: 5px 0 10px; }; V: Q5 X' Z. V& X; N0 I
- .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; }
8 q* g* d% Q* u5 Q0 w4 K9 o: ^. V - .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }; V) W( @. S# ^2 Z+ c$ ^; w, ~4 `
- .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
. k F7 _( d/ A3 e - & C1 L% i: a4 m
- /* 瀑布流布局 by Pony 1204121803 */+ q9 ~$ e3 s; D) y9 d
- .waterfall { position: relative; margin-top: 15px; }; `: u5 K) h0 r* r8 l/ }, m
- .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%; }
; A: D- E! _6 R - .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
6 X* ^" W. D. F1 H2 A* ^* P$ M( D - .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
+ b! h: a: Q! d - .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }8 t3 ?2 R2 u2 E$ w) k; F* A
- .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
3 T% M X. {3 @) @$ _ - .waterfall .auth img { display: inline-block; margin: 0 1px; }) g2 f- \( S6 k3 h" @
复制代码3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分(
即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束)。[code]
) A* k/ k& D% Q. }$ X! O
<!--{else}-->
; ]1 ^/ L. F U0 ^6 _3 f
</table><!-- end of table "forum_G[fid]" branch 2/3 -->
: P: C# y0 m( ]$ o<ul id="waterfall" class="ml waterfall cl">
6 |. R2 E- Y/ @ v) H( `
<!--{loop $_G['forum_threadlist'] $key $thread}-->
) ]+ C( f5 h5 G
<!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
. U' C" L6 X+ u2 @' h<!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
$ ~# ^' p) O$ Y) h2 |( f* \/ P<!--{eval $thread[tid]=$thread[closed];}-->
+ Z M; d: D, V. E/ X: ^
<!--{/if}-->
P4 H( R0 e/ c: n
<!--{/if}-->
' l8 g. E! T9 D. ^
<!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
: N) o1 d, U4 k+ c- q7 n9 D0 G+ o
<li style="width:{$waterfallwidth}px;">
# N4 p' k8 K5 E6 S' J1 {' S, H6 r6 `, y
<!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
' K( B$ ?& b8 \. ^7 g1 W<div style="position:absolute;margin:1px;padding:2px;background:#FFF">
4 F4 X) ~0 S4 l& f1 \+ y- r# n z<!--{if $thread['fid'] == $_G[fid]}-->
1 D* r; l: ~+ W. k<!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
/ W3 g) D6 f* `+ R$ p( r% N9 x<input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
" l2 O- M9 h H3 R! ~<!--{else}-->
5 p( u: A' L0 M0 C% K( O, m<input type="checkbox" disabled="disabled" />
+ |2 C: O2 C5 W6 ?# a' j0 w9 V% }
<!--{/if}-->
8 s+ D$ S6 j" Q" R, n* Q<!--{else}-->
[( |) B5 ]5 k& P( J
<input type="checkbox" disabled="disabled" />
3 J4 _5 b; @' y `2 J/ D4 j* J" I<!--{/if}-->
1 {' v9 B/ J: w" `4 E1 D
</div>
9 X. f8 M: [) @; i& J
<!--{/if}-->
7 H- B5 C; R6 A# J3 K( k0 R<div class="c cl">
* M& |$ B8 v p/ G% _<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">
4 _( P" U3 U2 W) Z/ H<!--{if $thread['cover']}-->
' X+ H" ?5 \* S1 X; N
<img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
7 w/ S! Y' } P4 ?
<!--{else}-->
& j9 W% T, r" g1 G+ s! s$ k6 ?<span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
2 `5 n, I: U! P1 r2 b! u' S m
<!--{/if}-->
% g+ R% E3 I, `/ J( U% S' h</a>
6 b' ]$ J5 _( W! U4 s</div>
" Z+ f" i6 t4 w1 g* ?0 c0 `<h3 class="xw0">
: j9 M* Z; b& I( X/ T: x' ]/ C
<!--{hook/forumdisplay_thread $key}-->
5 Y5 N [. ?' Q6 |% O
<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>
4 r7 }- x* ~& K$ v$ r/ @. u' i
</h3>
! i4 t" o* t# _ ]2 c<div class="auth cl">
3 _1 W) N2 K/ A
<cite class="xg1 y">
& E2 Y8 }0 ~4 ]0 E+ U" `
{echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
* ]0 Q1 O: r/ X* z. c{lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
/ F, J) ?: ` \+ ?) W# x2 M</cite>
! Y5 a% h+ C+ ?: y
<!--{hook/forumdisplay_author $key}-->
8 U9 P, B' h0 M5 M+ X9 I( M
<!--{if $thread['authorid'] && $thread['author']}-->
$ _- I1 O/ A G7 i/ E# I: A<a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
5 {$ m0 E7 c0 t! U3 p
<!--{else}-->
; n( T' z* b7 a( V+ j- d5 F# U* ~
$_G[setting][anonymoustext]
+ l1 e+ D% x# e3 M- X) E( ^<!--{/if}-->
) ]* a8 h7 y% h. A3 L3 s6 y- L</div>
6 A! J. |* ^( M8 M
</li>
2 u* P* \: R- e% ~- _4 U+ U<!--{/loop}-->
) L; O8 y; y V6 V _5 ^+ D1 k
</ul>
8 |8 r5 H1 C* B
<div id="tmppic" style="display: none;"></div>
8 B" h, f: r4 ?1 `4 ~( |1 V A1 P( }
<script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
( {! Y4 G/ X6 D6 |- ~<script type="text/javascript" reload="1">
# {+ v) f8 r$ h, Tvar wf = {};
/ O4 I( V1 H/ m4 O0 L$ n1 j' y3 A
_attachEvent(window, "load", function () {
9 g7 Z0 c. h& Y5 p" a
if($("waterfall")) {
' J8 k; F/ e$ V- f: {2 f+ D" `; ?
wf = waterfall();
: p: ], w8 B$ O}
4 @) \) U( G( u3 ^
7 E7 u5 E" ~' W+ v6 X7 Y0 r<!--{if $page < $_G['page_next'] && !$subforumonly}-->
$ W( {8 }: z6 @3 e0 d9 F: c( o- xvar page = $page + 1,
# s) v' b) s0 smaxpage = $page + 10,
- E- N0 O2 O) |2 i/ p: ystopload = 0,
5 m! ]+ ]* n' G7 p( b! vscrolltimer = null,
/ W& Q$ s5 H# ~+ |% s% Z1 h
tmpelems = [],
/ i* }" [4 R1 a9 \/ N" u2 y- Dtmpimgs = [],
' d! q4 `4 m4 B' g0 Vmarkloaded = [],
! K$ V* y8 T$ j- I5 S* _
imgsloaded = 0,
- j/ }( M" Y6 z! R! k: n
loadready = 0,
5 t( Y! q! c ~" K9 d7 e
showready = 1,
5 e) {0 p# W4 H, l' I8 D% q7 ^- P
nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd