近日看到网上流行的瀑布流,也参照改了下,但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项,直接影响到的是非图片版帖子列表界面,其实没必要把form表单里的所有项都替换,仅替换“else if 图片部分+分页”部分即可。
' t; x) }5 ^$ _6 u. ], G
为了完整方法跟其他帖写的都一样,为方便新手,操作如下:
9 k& ]3 k* r" { A
7 l/ J9 Q$ h- H; R" R) A% b6 C m
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录,同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
9 \5 G _2 w4 U' s! R" W3 p* ]
2、模板目录下增加common\extend_common.css,其内容如下:
- 1 t) n8 y6 r3 U# h( M
- /* 大分页按钮 by Pony 1203121325 */
- h+ m5 n# G9 u x$ M ~1 _( f - .pgbtn { margin: 5px 0 10px; }
W. U5 b$ U, ], S$ ?3 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; }: m' N1 f0 g! w# N, q* T4 |
- .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
# p$ M9 o1 d1 t5 i2 t1 Q% k: \: @ - .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }/ X7 K: Y( Z; t: Q; v G
* G+ N( W( P& r, f- v0 g/ a' M- /* 瀑布流布局 by Pony 1204121803 */( @; B( L$ [) o$ ^* ]
- .waterfall { position: relative; margin-top: 15px; }
' j- ?, f. u3 o; D a& { - .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 ~- g! }# w7 t7 G" \/ H
- .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
: u2 H" A1 K) ~9 o- d5 C. x - .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
5 |) o+ g$ L* R" E" K3 r* C) V0 c - .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
! t- [& c X/ t" W) P - .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
- v' t- g! U+ Q8 c, c( z8 Q4 l - .waterfall .auth img { display: inline-block; margin: 0 1px; }
" m. p$ i9 e8 i+ a
复制代码3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分(
即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束)。[code]
# n+ s8 i! A8 y; M+ y
<!--{else}-->
3 ~" W5 r4 B/ K# G3 h4 P
</table><!-- end of table "forum_G[fid]" branch 2/3 -->
4 _( |$ b- y+ U; H
<ul id="waterfall" class="ml waterfall cl">
1 \- ?! l3 v, `+ `8 v0 k
<!--{loop $_G['forum_threadlist'] $key $thread}-->
. n* l+ ~- C' t1 g+ x; u<!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
: Z8 }3 Q6 E5 f2 v0 a<!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
c9 B6 E) r5 T5 F
<!--{eval $thread[tid]=$thread[closed];}-->
5 B+ [& i, k8 Y) I* _5 b<!--{/if}-->
% I: Z! \4 n9 X, I& m<!--{/if}-->
+ i' M! L- \6 n1 u, O7 f0 {<!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
- @! z9 t5 S) c+ O# ~
<li style="width:{$waterfallwidth}px;">
+ a d3 c" b- o- l<!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
8 S4 ?, h8 c! f9 P4 E; z
<div style="position:absolute;margin:1px;padding:2px;background:#FFF">
4 h( m& Z- }, A) B<!--{if $thread['fid'] == $_G[fid]}-->
% q2 ?& b. m1 E+ z( V<!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
6 S# _+ u' G3 D2 l: i
<input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
# Z5 L+ q, Q: J7 j6 C+ t+ y<!--{else}-->
9 G1 w9 ]0 f( ^# {
<input type="checkbox" disabled="disabled" />
( w9 U- m j' A3 T<!--{/if}-->
" K$ H. t+ E9 d/ S3 W1 `<!--{else}-->
/ K6 A# U# A% T5 C* Y+ U# c5 e<input type="checkbox" disabled="disabled" />
, P& E# n( C- N<!--{/if}-->
9 v& J5 b3 Q! Y, n</div>
4 e" a/ c% j4 B' e0 u- }
<!--{/if}-->
w; d6 T4 g3 \" \+ M+ b2 }% [; q<div class="c cl">
9 c u6 i# r3 O/ W
<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">
7 N; r, f: m- V/ {" U9 ^/ }<!--{if $thread['cover']}-->
0 v! a* }1 ^" j9 c3 \# Z! J<img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
% Q: z1 ]9 T+ \<!--{else}-->
5 s% {) {+ D, z7 U" `<span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
L6 b4 o, }8 z
<!--{/if}-->
, z1 m( S3 G" \6 u+ F' |</a>
4 s4 f4 D; M3 r% _7 \</div>
% c, h5 K9 ~2 r0 j- @
<h3 class="xw0">
0 M1 d# J9 Q, P/ i' G& u$ B" q3 q<!--{hook/forumdisplay_thread $key}-->
* k) N* v' T: }
<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>
5 r, }) L9 t- v [' r8 _ @; k
</h3>
; P6 m4 Y# I& b* I# J+ m# F<div class="auth cl">
! O/ s9 f5 G6 Y% E
<cite class="xg1 y">
1 b, @1 H, m' L" M- X& N{echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
8 O1 r- i$ @3 D: f3 e/ L
{lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
. V$ a4 ^% e* j: e/ }8 b</cite>
0 @5 ^4 t$ f3 P4 }5 R/ u& m
<!--{hook/forumdisplay_author $key}-->
2 ?( B/ ? v5 Q3 Y8 R/ z
<!--{if $thread['authorid'] && $thread['author']}-->
; A$ j, P* e* C$ ~
<a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
+ T: ?1 e6 l! Y* v) ~; t6 \8 K<!--{else}-->
3 W! P0 q5 h. F/ M
$_G[setting][anonymoustext]
" U2 E: W$ x7 _+ ~) u6 S
<!--{/if}-->
/ k* \5 \3 p- r</div>
/ j1 ]: d7 s; n7 B; U! f! o
</li>
1 o: d- X0 k, Q b6 c5 C* e _<!--{/loop}-->
6 U' D% u/ U; T1 S6 H, V
</ul>
3 k! U O! s+ s. ~$ }) ?
<div id="tmppic" style="display: none;"></div>
3 i; F5 `0 B/ v" L<script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
& ~: m. D6 j1 ~; e- ?<script type="text/javascript" reload="1">
7 p0 I" G6 X/ B5 {) H" P1 I- r
var wf = {};
/ {3 G3 K( H+ m0 U0 q# E: D# _! Y
* W$ }5 v; T( C0 J4 v, b_attachEvent(window, "load", function () {
! [2 Y+ v* I" D7 Q6 X% A6 g
if($("waterfall")) {
8 W% x0 R8 Z( W
wf = waterfall();
/ L% T( B- N! z+ c3 z8 h) w& A
}
: v8 }( {/ t: M# ^2 B+ \
1 L1 K( N3 D# o t1 r, h6 f, i<!--{if $page < $_G['page_next'] && !$subforumonly}-->
% T9 K2 D! L) w' ]+ o( b8 W/ gvar page = $page + 1,
8 `$ J2 D% e- e. b6 O3 ?
maxpage = $page + 10,
0 u4 j, ~) D8 l0 { Vstopload = 0,
! v0 `6 H2 h3 G$ H4 K+ E6 F% B2 }
scrolltimer = null,
' C( L5 _6 d8 @# X* F- {( Atmpelems = [],
- W0 w, q$ Z1 d$ n
tmpimgs = [],
6 W0 N& l. _& b( O: e! @5 Hmarkloaded = [],
* D! ]+ n8 B( G# F+ m- @% O6 ^imgsloaded = 0,
$ A5 a+ R! Y: s6 |$ M/ t! x% m
loadready = 0,
- |: B; `2 O, I* u! ~! fshowready = 1,
* ^/ _$ o6 C' [7 u
nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd