时尚酷族

标题: DZX2.0版图片版瀑布流分享 [打印本页]

作者: CooL.泪猪    时间: 2012-7-29 23:35
标题: DZX2.0版图片版瀑布流分享
近日看到网上流行的瀑布流,也参照改了下,但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项,直接影响到的是非图片版帖子列表界面,其实没必要把form表单里的所有项都替换,仅替换“else if 图片部分+分页”部分即可。9 \1 W8 R4 `4 e! q7 ~& E; {8 O/ ~
为了完整方法跟其他帖写的都一样,为方便新手,操作如下:
$ |6 D1 n0 J/ T# l) l' v# o  _0 x9 z& s1 {
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录,同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。/ ]0 A+ [8 ]2 G) e7 r
2、模板目录下增加common\extend_common.css,其内容如下:
  1. - V' C' Z* N7 V
  2. /* 大分页按钮 by Pony 1203121325 */
    ! @; u* c7 T0 w; B" q
  3. .pgbtn { margin: 5px 0 10px; }
      e3 Q, D0 B2 g
  4. .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; }. q3 t7 z/ g+ W" M. X5 t/ ?
  5. .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }9 F, J- s7 E. n( ~) T- _
  6. .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
    0 D/ ]/ H  l' a" c3 f' @) I  e( f

  7. . l* E# J" i. o( s( `, K, y0 U
  8. /* 瀑布流布局 by Pony 1204121803 */& x$ D$ d) n/ _  p2 j& a
  9. .waterfall { position: relative; margin-top: 15px; }
    . s! V1 w: Z" W$ B/ S5 ~' |. }$ E
  10. .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%; }
    3 q$ G, o# D! p7 Q
  11. .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }' A, r, `" E. k  j7 H
  12. .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }; F  a6 p) x! v  `% x
  13. .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }5 H$ `9 X. F& d2 e. D
  14. .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
    7 u3 ~. _3 J2 ]; V# u, s6 P+ G
  15. .waterfall .auth img { display: inline-block; margin: 0 1px; }
    0 V+ M' Y, |& R6 G, i; O
复制代码
3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分(即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束)。

  1. # A5 E$ ~: s* U. \+ I
  2. <!--{else}-->; {; u. N! c+ d: f/ a4 l! {4 }
  3. </table><!-- end of table "forum_G[fid]" branch 2/3 -->
    $ O5 e2 f8 {4 d4 R* r
  4. <ul id="waterfall" class="ml waterfall cl">
    ( s9 m  D+ O2 }) j+ x4 n
  5. <!--{loop $_G['forum_threadlist'] $key $thread}-->
    ( G5 n8 l: a* R# c2 R9 ]
  6. <!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->+ q6 ]" u, j* R7 |9 U0 O% W5 t
  7. <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
    ) R- ]' |: v/ f5 n5 ^( g. d6 p
  8. <!--{eval $thread[tid]=$thread[closed];}--># i1 m4 P! Y7 F' j
  9. <!--{/if}--># l' k* k+ X8 I$ n$ |0 M
  10. <!--{/if}-->1 f% s/ U2 b, ]
  11. <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->3 T- A9 _' F- z0 B$ ^% [, ?2 S
  12. <li style="width:{$waterfallwidth}px;">
    ) c' W3 Q! P% N3 F; q/ m
  13. <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->, r, `# L# p0 }, U, ?9 I9 y6 s
  14. <div style="position:absolute;margin:1px;padding:2px;background:#FFF">
    * {9 Q# x( C2 W1 p$ [* O5 I
  15. <!--{if $thread['fid'] == $_G[fid]}-->4 Z( b2 Z7 D( S6 }
  16. <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
    ; E  K' z8 F1 x
  17. <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />1 P/ O% y$ P1 f7 f7 Q- R
  18. <!--{else}-->
    - f7 i3 W3 _& g3 f2 {# a4 O4 Y6 y0 i
  19. <input type="checkbox" disabled="disabled" />
    6 K; x9 a% W% |' J( q8 h! w& Q
  20. <!--{/if}-->6 H3 P- a2 S- F: B$ `
  21. <!--{else}-->
    7 j0 r" J. f( c. R2 ?- j" u
  22. <input type="checkbox" disabled="disabled" />& j5 m& I% C3 ]$ c$ P
  23. <!--{/if}-->
    , B/ m) J% y/ q. S
  24. </div>" I4 X+ O' J: D; x! F; @
  25. <!--{/if}-->
    ' u4 ]# j7 x5 {% Y
  26. <div class="c cl">
    % d. x7 V0 g& W# O  s- q- @
  27. <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">
    . v! X* j0 J  N
  28. <!--{if $thread['cover']}-->
      P7 R1 F7 E5 d* k& g  Y! m
  29. <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
    1 M4 o% @" C: p* f
  30. <!--{else}-->8 O- s% l" O; l% Y9 c( B
  31. <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>7 {7 E0 F. A; I" s/ x
  32. <!--{/if}-->7 I- o) c& q- K7 U
  33. </a>- l( M' Z$ o& N* a, b% k
  34. </div>! K: ~( z0 M# Y
  35. <h3 class="xw0">' |1 W% J4 S2 V( s
  36. <!--{hook/forumdisplay_thread $key}-->( s- d3 A7 A) g: {! `  @, u# f
  37. <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>$ z) @! Z2 m; V: U( [% U: L% e+ g
  38. </h3>
    ! B% s6 B4 [/ e/ w. e
  39. <div class="auth cl">. N6 ?& L4 D% g; U% T6 d  k. ~
  40. <cite class="xg1 y">
    / g9 F, Y! ]8 H2 ~! G2 t
  41. {echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
    5 o% T! U% H# T" h& R, ^
  42. {lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>5 i, [( o' a- q! H; E6 P  k9 U
  43. </cite>
    / }+ {- n1 G4 y' K  |9 K" }
  44. <!--{hook/forumdisplay_author $key}-->/ L9 u3 b5 {$ U- M4 l9 u9 b
  45. <!--{if $thread['authorid'] && $thread['author']}-->  v, d; l, X8 a1 x8 n+ M
  46. <a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
    # w: r/ L  w, c. ?$ w, {: C' {
  47. <!--{else}-->
    1 V1 w9 B" \5 ]; o  M3 s$ u" D4 ?
  48. $_G[setting][anonymoustext]4 N6 T2 S3 V5 B9 u! S: |6 O* m
  49. <!--{/if}-->
    % G2 U2 S9 K5 ]  Y( r1 h( J
  50. </div>
    1 o) l# u7 f8 S% E
  51. </li>- R/ L8 `+ |; [. v8 ~
  52. <!--{/loop}-->: u0 w8 f% x6 S2 Z; b* o
  53. </ul>8 ~# n  V0 V& o" p% J
  54. <div id="tmppic" style="display: none;"></div>
    & z+ P$ \+ p7 B- f' [$ g7 I, D7 Q
  55. <script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>$ X! l" W# W# p. ^5 r2 K7 Y* u# G
  56. <script type="text/javascript" reload="1">
    $ F: t  o$ n: S  o# k+ l0 v; [. t
  57. var wf = {};  [4 l: {' o! C9 ~" Y; ^0 j& t6 X) H
  58. . z9 J% n! J" H# ~1 e7 b
  59. _attachEvent(window, "load", function () {
    , A! ?0 k: \6 D: G& Y1 Y( o' P, \' U
  60. if($("waterfall")) {. G" j! w1 \" a
  61. wf = waterfall();: w; O) H& }7 M% u5 C" P& A
  62. }
    9 I7 }& u1 T. f1 N  m* e
  63. 1 m- k7 M' ?' a) \8 b% L: @6 j$ x6 ?
  64. <!--{if $page < $_G['page_next'] && !$subforumonly}-->
      r4 ]" p- w& \# z0 T, G
  65. var page = $page + 1,
    : l! f- z5 N2 p7 V9 g1 g
  66. maxpage = $page + 10,
    + v* {! l! p) Z$ `! t8 @
  67. stopload = 0,
    4 r6 I4 b- ~2 D" k& h
  68. scrolltimer = null,
    2 d$ X" k4 V: l- Z# o+ y
  69. tmpelems = [],6 ]) `/ g9 h& y
  70. tmpimgs = [],
    & T8 L: P; K- [
  71. markloaded = [],
    ; S3 [+ Z5 {/ ^0 ?
  72. imgsloaded = 0,
    0 \+ Y0 ?; {/ L. k) M
  73. loadready = 0,
      z/ Z+ r. }; m6 N% C7 f+ A
  74. showready = 1,; ~, S% _5 Y" }$ k% K$ @! v
  75. nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd}&page=',
    + ^6 }, X) i& U, \" R
  76. wfloading = "<img src=\"{IMGDIR}/loading.gif\" alt=\"\" width=\"16\" height=\"16\" class=\"vm\" /> 加载中...",  T; j* T0 U" T- o; a
  77. pgbtn = $("pgbtn").getElementsByTagName("a")[0];8 J/ z& K* i1 `. T

  78.   N! }# g3 ~8 e" u
  79. function loadmore() {
    * K5 z- X' f' w  d  e% B' k; w
  80. var url = nxtpgurl + page + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));2 m6 I; J# B' T, p" y4 _: J
  81. var x = new Ajax("HTML");
    8 h- |, b$ ?* F1 _5 `. U8 Z
  82. x.get(url, function (s) {; K4 A$ I5 k+ {: n/ U/ a6 i6 @* [
  83. s = s.replace(/\n|\r/g, "");
    8 w7 l4 r7 l2 |4 J" ]. x/ A' c7 N) e
  84. if(s.indexOf("id=\"pgbtn\"") == -1) {' y4 @' K) z0 f7 G- G+ a6 D
  85. $("pgbtn").style.display = "none";
    / ~! ?* f/ |  @. R
  86. stopload++;7 V) i$ J, S4 ?2 D0 t8 o( `
  87. window.onscroll = null;! Q; S  h: \" [5 j
  88. }
    3 s, Q7 ^' k$ ?$ \/ [

  89. 3 s/ T2 n6 d; z' s% q
  90. s = s.substring(s.indexOf("<ul id=\"waterfall\""), s.indexOf("<div id=\"tmppic\""));
    0 u; r: ~, k& n
  91. s = s.replace("id=\"waterfall\"", "");
    6 x. R& w1 |5 P4 Z
  92. $("tmppic").innerHTML = s;
    4 m* H% C" Z4 M& C
  93. loadready = 1;
    8 n1 u# `. E# c+ h8 o
  94. });" J  k4 b4 ?: V2 z. g9 ?) R8 m3 ]
  95. }
    3 m; C2 t. @9 Q7 s

  96. . t* Y* Y9 i- |& P  Z/ R0 x
  97. window.onscroll = function () {
    9 ^$ A* h/ _6 |; o  j9 ?
  98. if(scrolltimer == null) {& ]2 L4 c0 f! W4 a& u$ }
  99. scrolltimer = setTimeout(function () {
    9 F7 ]3 @0 @: e5 G7 j
  100. try {
    # G& C  w" V5 C% K
  101. if(page < maxpage && stopload < 2 && showready && ((document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight + 500) >= document.documentElement.scrollHeight) {) I- e. E! ], t' D1 w3 w! F; N
  102. pgbtn.innerHTML = wfloading;
    ! S, ~. ?" L- k; v: j
  103. loadready = 0;
    + [/ u- W, T) l$ g/ B- X! X5 y
  104. showready = 0;4 l  M6 a4 m$ x) x) A- s- E% w( l
  105. loadmore();; @; y- |* H! f
  106. tmpelems = $("tmppic").getElementsByTagName("li");. w9 X# n2 h6 `+ T  W5 S
  107. var waitingtimer = setInterval(function () {. R+ t, \% {( _4 Y5 v1 a
  108. stopload >= 2 && clearInterval(waitingtimer);
    2 o  d: U" H& f9 q" b# S# b
  109. if(loadready && stopload < 2) {4 U/ I( t1 Z* [* b
  110. if(!tmpelems.length) {
    $ |: O1 L9 D% a  ^3 P/ e: H
  111. page++;
    ! E6 U) T3 G# Q8 @
  112. pgbtn.href = nxtpgurl + page;. D" T1 {7 N" ?# J$ p
  113. pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
    + }' n- A" N+ A/ M
  114. showready = 1;
    , m  n7 M, q9 D4 q/ q
  115. clearInterval(waitingtimer);9 I# R5 j. h( C
  116. }
    0 q% B  i: z8 f7 W( v, L- y
  117. for(var i = 0, j = tmpelems.length; i < j; i++) {* \: V" K( N4 r
  118. if(tmpelems[i]) {: Z! b2 [" j& K; H+ s
  119. tmpimgs = tmpelems[i].getElementsByTagName("img");7 L+ u! s9 d, j8 P; l$ N
  120. imgsloaded = 0;
    4 @0 o' d% f" g8 l1 }2 Y( a
  121. for(var m = 0, n = tmpimgs.length; m < n; m++) {
    # G) q: n8 V$ P; }& z! I
  122. tmpimgs[m].onerror = function () {# a$ s9 O0 C( r, ]8 @0 o
  123. this.style.display = "none";' [4 {8 X7 o  n0 ^/ Y+ G
  124. };
    ' g& \7 t9 F6 C) _/ k  g2 z* _
  125. markloaded[m] = tmpimgs[m].complete ? 1 : 0;' L! W8 `% c  _. _, o
  126. imgsloaded += markloaded[m];; J8 D8 P0 |- P8 }! n1 d
  127. }* L  k1 y: N1 N3 g
  128. if(imgsloaded == tmpimgs.length) {0 [0 X; w0 N. U
  129. $("waterfall").appendChild(tmpelems[i]);
    * s0 L- K3 A9 Y1 w
  130. wf = waterfall({
    % x( O9 a6 e" T' J
  131. "index": wf.index,
    ) v: y& n1 U& t. e5 G# o* U  V
  132. "totalwidth": wf.totalwidth,# }+ w0 k3 ?3 Z, K, N6 b8 L5 [# y
  133. "totalheight": wf.totalheight,
    2 R) @5 k) {" v% W
  134. "columnsheight": wf.columnsheight
    / \+ K5 y. c6 _. \
  135. });
    6 V) I2 B5 P9 H3 X
  136. }
    , S/ B& ]# ?! S- o5 _3 A
  137. }6 _* D: s8 ]1 ?# ?' U
  138. }
    3 k: J+ R/ N/ U" R: M, p
  139. }/ ~7 J, Z' g/ k: x
  140. }, 40);3 h  q0 a0 p3 w1 x- C! F
  141. }1 z* v( f/ G" c- e" @$ Y; B
  142. } catch(e) {}7 C0 A% ~/ y& V3 h* `) Q
  143. scrolltimer = null;
    4 |& E& l- ^4 ~; Y0 f
  144. }, 320);
    4 @, @- w  w: x$ {9 k
  145. }
    3 S( l; f+ G+ [$ B
  146. };  S6 m! p, ~1 K6 O  m- q/ b% w( o
  147. <!--{/if}-->
    2 M6 _8 ^2 c$ ^% Q

  148. ( O3 d4 k4 F, y
  149. });
    3 I/ [0 p/ b' _8 i& M4 U
  150. & h& g. h9 x% x; V# j/ W! X" G
  151. </script>
    : ^/ d! }8 g' E* ~( e- [
  152. <!--{/if}-->
    7 K7 r; W" V1 U! N+ C2 v
  153. <!--{else}-->. k1 \+ C' a9 q. Z7 T1 T$ v6 r, q
  154. <tbody class="bw0_all"><tr><th colspan="{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}4{else}3{/if}"><p class="emp">{lang forum_nothreads}</p></th></tr></tbody>
    5 g' P% I% D/ X" {" _  t: v
  155. </table><!-- end of table "forum_G[fid]" branch 3/3 -->, k% ]/ _8 u9 k# l
  156. - v4 o% K& \8 E& I4 Q. L2 E
  157. <!--{if $_G['setting']['threadmaxpages'] > 1 && $page && !$subforumonly && $page < $_G['setting']['threadmaxpages'] && $page < $_G['page_next']}-->% q6 S& m' R# f+ b
  158. <!--{eval $nxtpage = $page + 1;}-->
    + Y( q& K) F: I  r6 V6 y% z3 p
  159. <div id="pgbtn" class="pgbtn"><a href="forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd}&{$multipage_archive}&page=$nxtpage" hidefocus="true">{echo '下一页 &raquo;'}</a></div>' {; |4 Q2 ^& x& \' i1 W' N9 X) \
  160. <!--{/if}-->/ D+ k  e0 A1 C/ t! @

  161. 3 x: A! h7 H! t
  162. <!--{/if}-->
    ! i( h, ?7 t& n" n9 K! c# Z
  163. <!--{if $_G['forum']['ismoderator'] && $_G['forum_threadcount']}-->
    , W  o+ }3 ]* x4 q# S
  164. <!--{template forum/topicadmin_modlayer}-->, h' |, H* U$ x4 s
  165. <!--{/if}-->
    ! O6 i! E5 L1 D
  166. </form>
    : v. H4 {8 z; l- a: P
复制代码
4、后天帖子列表界面,图片宽度设为200,高度9999,相应版块开启图片版即可
/ x, S# |. {) g: F% x! M
& Z5 V; Y4 M( J: {5、如果你需要向下加载的话,需要把分页代码一起复制进forumdisplay_list.htm去; {2 F& g1 _& {+ c

  `, {  P5 d. @* u演示:http://www.coqq.net/forum-75-1.html




欢迎光临 时尚酷族 (http://www.coqq.net/) Powered by Discuz! X3.2