近日看到网上流行的瀑布流,也参照改了下,但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项,直接影响到的是非图片版帖子列表界面,其实没必要把form表单里的所有项都替换,仅替换“else if 图片部分+分页”部分即可。
" m2 ~' |! R- U5 t
为了完整方法跟其他帖写的都一样,为方便新手,操作如下:
% u: e( n" c7 ]2 w6 _0 V' Q* U8 D
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录,同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
+ Y2 v4 Z0 T- M i) s9 l2 Y! t2、模板目录下增加common\extend_common.css,其内容如下:
& c- Q4 r% o- ~! C( o+ n" n0 y- /* 大分页按钮 by Pony 1203121325 */
8 ?2 v" f" u. Y1 Z# J4 }( A ^ - .pgbtn { margin: 5px 0 10px; }
- w' p' `' r& D! h0 V x! n - .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; }6 V" G: w0 y, B1 {* c3 S) f
- .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
- J+ b( o+ U% @. q - .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }+ [7 _5 a1 c; J5 Y- t! d3 S+ o
, P4 f ~- j: q/ a" n& u7 t/ ]1 q- /* 瀑布流布局 by Pony 1204121803 */
: a. c: l+ J/ z( @, ^' \ - .waterfall { position: relative; margin-top: 15px; }: v$ g( S! M3 x6 G2 v* c
- .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%; }, a9 w' i6 d& ~2 G; l+ E1 ~
- .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
5 X* q) v$ A6 {1 e* L - .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
5 O8 a5 M3 |1 D( Q v - .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }. H6 c; J! M& J2 o; L- x
- .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
* g, }' {6 s. |# M* @- l; X - .waterfall .auth img { display: inline-block; margin: 0 1px; }
q# [7 Y2 t, D1 p$ `: ~7 x
复制代码3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分(
即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束)。[code]
; q" t0 M2 T# k, W( Z0 T N<!--{else}-->
3 |. I8 B. s I
</table><!-- end of table "forum_G[fid]" branch 2/3 -->
/ l$ i, P, Q, V) Y" p9 c: t<ul id="waterfall" class="ml waterfall cl">
9 G! u0 c) j6 K& H. S8 h<!--{loop $_G['forum_threadlist'] $key $thread}-->
0 s5 }9 M Z. p' q' C( s<!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
. |9 r" u1 f8 Y" k) \
<!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
# A/ n* S# E! n4 m" X# s
<!--{eval $thread[tid]=$thread[closed];}-->
3 Y* M. r: H- Z0 g. ^<!--{/if}-->
3 X; o% h [& E& R/ @& n<!--{/if}-->
Z3 ^6 ~! @2 ?2 ~5 d
<!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
5 J; _9 x% ^3 D- r: A0 j<li style="width:{$waterfallwidth}px;">
; W6 D2 ^. G. e, c<!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
0 i1 |) C8 a/ I- ?0 @ y<div style="position:absolute;margin:1px;padding:2px;background:#FFF">
( c( }' w& d+ A7 }<!--{if $thread['fid'] == $_G[fid]}-->
% W9 I# _6 n5 A7 `3 I<!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
; y) w# K( {# v6 \" _& w
<input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
6 C; m* y; \$ O. O( Y<!--{else}-->
1 K2 S- O1 P3 w. r$ P& @4 [<input type="checkbox" disabled="disabled" />
" v0 |/ _# D o3 d% w
<!--{/if}-->
! E& y: y; I9 I& r r2 M( p
<!--{else}-->
" p9 c+ v/ ~' X0 e: p5 c0 J
<input type="checkbox" disabled="disabled" />
6 g% j8 p7 c6 n" l+ x) m# H
<!--{/if}-->
9 m& g3 \ D& W</div>
' z u: x. q1 d8 h4 O
<!--{/if}-->
! g% v4 P) s3 d0 f) ]
<div class="c cl">
! r2 h4 T; |! X( V<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">
. r5 y( G: E+ p R<!--{if $thread['cover']}-->
2 A. a* R+ J4 I<img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
/ s! B; G5 s' B; \- E
<!--{else}-->
( o" H$ E' R8 N<span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
) p& w3 K' Z9 a2 {4 Z
<!--{/if}-->
3 c; o, g/ q/ G, M( _1 w
</a>
/ a( R! {& d& [- ~7 H</div>
) d% U1 H. n" }) U" t, }4 d<h3 class="xw0">
4 r. d! d# @0 Z
<!--{hook/forumdisplay_thread $key}-->
& L4 f4 Y$ ~8 p
<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>
; z4 n, E& f+ e# L
</h3>
6 S: E+ n4 @9 L; Z
<div class="auth cl">
+ L+ j7 }; V; X- l& X
<cite class="xg1 y">
2 [& E% [2 @% u* H6 G{echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
) Z! E- W- V) r( v& n! s0 I7 _; n1 x
{lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
* E% i, E5 V9 a1 H L( _* @1 q
</cite>
: i% l$ w; j# h5 w1 u
<!--{hook/forumdisplay_author $key}-->
0 i% y% |9 M! }
<!--{if $thread['authorid'] && $thread['author']}-->
9 c; N! G/ K% S( Y* K
<a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
9 D$ m7 V' C8 k& {, c
<!--{else}-->
O5 A: u7 L) `1 Y( u" d2 ~$_G[setting][anonymoustext]
- b: [% Z; ]+ O5 K
<!--{/if}-->
" C2 ~+ u0 j: Y9 d
</div>
# _ V# G, ~( i! l: m
</li>
% }2 a) e+ F% ?; H: a% q
<!--{/loop}-->
; w( V7 e, y, M: V</ul>
8 @7 D" Y& i9 K<div id="tmppic" style="display: none;"></div>
( ` G1 e( L- i<script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
# z( k& A7 k- O<script type="text/javascript" reload="1">
0 F, @0 S' F! lvar wf = {};
/ S5 g k J7 E% q
, S* N* u4 n: L3 J; u0 a! r. o
_attachEvent(window, "load", function () {
% y' h7 T7 G. [% @/ l
if($("waterfall")) {
! H/ u' p' O6 [, F9 \' Q) E
wf = waterfall();
' E0 P' D% x% z+ j2 @( r% v! K( s}
' c9 {( }5 L; s- y9 {/ [3 Y
+ M k" j" p7 \, h `8 P
<!--{if $page < $_G['page_next'] && !$subforumonly}-->
7 F5 z* T2 G: j5 P& e0 e: z
var page = $page + 1,
7 R V8 R# R6 Zmaxpage = $page + 10,
# m; y6 Z8 D1 cstopload = 0,
$ I' Y3 F4 c& R$ H7 c4 ^
scrolltimer = null,
) C4 ]7 t9 F3 r/ t( ]& N. b
tmpelems = [],
# b0 S( B8 o4 Y6 A% e
tmpimgs = [],
. D9 W' @+ Q8 U7 U+ n
markloaded = [],
# p% U8 N2 f3 ^5 w. S, `& uimgsloaded = 0,
$ j% M$ }' `, }( x7 b2 J
loadready = 0,
/ F C7 {6 H, C" i$ j
showready = 1,
( C0 a0 M, {. ]nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd