时尚酷族

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

---

作者: ＣooL．泪猪    时间: 2012-7-29 23:35
标题: DZX2.0版图片版瀑布流分享
近日看到网上流行的瀑布流，也参照改了下，但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项，直接影响到的是非图片版帖子列表界面，其实没必要把form表单里的所有项都替换，仅替换“else if 图片部分+分页”部分即可。
为了完整方法跟其他帖写的都一样，为方便新手，操作如下：
$ |6 D1 n0 J/ T# l) l
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录，同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
2、模板目录下增加common\extend_common.css，其内容如下：

1. 
   
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; }
   
5. .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
   
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 */
   
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; }
    
12. .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
    
13. .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
    
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}-->
   
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'])}-->
   
7. <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
   ) R- ]' |: v/ f5 n5 ^( g. d6 p
8. <!--{eval $thread[tid]=$thread[closed];}-->
   
9. <!--{/if}-->
   
10. <!--{/if}-->
    
11. <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
    
12. <li style="width:{$waterfallwidth}px;">
    ) c' W3 Q! P% N3 F; q/ m
13. <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
    
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]}-->
    
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]" />
    
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}-->
    
21. <!--{else}-->
    7 j0 r" J. f( c. R2 ?- j" u
22. <input type="checkbox" disabled="disabled" />
    
23. <!--{/if}-->
    , B/ m) J% y/ q. S
24. </div>
    
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}-->
    
31. <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
    
32. <!--{/if}-->
    
33. </a>
    
34. </div>
    
35. <h3 class="xw0">
    
36. <!--{hook/forumdisplay_thread $key}-->
    
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>
    
38. </h3>
    ! B% s6 B4 [/ e/ w. e
39. <div class="auth cl">
    
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>
    
43. </cite>
    / }+ {- n1 G4 y' K  |9 K" }
44. <!--{hook/forumdisplay_author $key}-->
    
45. <!--{if $thread['authorid'] && $thread['author']}-->
    
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]
    
49. <!--{/if}-->
    % G2 U2 S9 K5 ]  Y( r1 h( J
50. </div>
    1 o) l# u7 f8 S% E
51. </li>
    
52. <!--{/loop}-->
    
53. </ul>
    
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>
    
56. <script type="text/javascript" reload="1">
    $ F: t  o$ n: S  o# k+ l0 v; [. t
57. var wf = {};
    
58. 
    
59. _attachEvent(window, "load", function () {
    , A! ?0 k: \6 D: G& Y1 Y( o' P, \' U
60. if($("waterfall")) {
    
61. wf = waterfall();
    
62. }
    9 I7 }& u1 T. f1 N  m* e
63. 
    
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 = [],
    
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,
    
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\" /> 加载中...",
    
77. pgbtn = $("pgbtn").getElementsByTagName("a")[0];
    
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));
    
81. var x = new Ajax("HTML");
    8 h- |, b$ ?* F1 _5 `. U8 Z
82. x.get(url, function (s) {
    
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) {
    
85. $("pgbtn").style.display = "none";
    / ~! ?* f/ |  @. R
86. stopload++;
    
87. window.onscroll = null;
    
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. });
    
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) {
    
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) {
     
102. pgbtn.innerHTML = wfloading;
     ! S, ~. ?" L- k; v: j
103. loadready = 0;
     + [/ u- W, T) l$ g/ B- X! X5 y
104. showready = 0;
     
105. loadmore();
     
106. tmpelems = $("tmppic").getElementsByTagName("li");
     
107. var waitingtimer = setInterval(function () {
     
108. stopload >= 2 && clearInterval(waitingtimer);
     2 o  d: U" H& f9 q" b# S# b
109. if(loadready && stopload < 2) {
     
110. if(!tmpelems.length) {
     $ |: O1 L9 D% a  ^3 P/ e: H
111. page++;
     ! E6 U) T3 G# Q8 @
112. pgbtn.href = nxtpgurl + page;
     
113. pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
     + }' n- A" N+ A/ M
114. showready = 1;
     , m  n7 M, q9 D4 q/ q
115. clearInterval(waitingtimer);
     
116. }
     0 q% B  i: z8 f7 W( v, L- y
117. for(var i = 0, j = tmpelems.length; i < j; i++) {
     
118. if(tmpelems[i]) {
     
119. tmpimgs = tmpelems[i].getElementsByTagName("img");
     
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 () {
     
123. this.style.display = "none";
     
124. };
     ' g& \7 t9 F6 C) _/ k  g2 z* _
125. markloaded[m] = tmpimgs[m].complete ? 1 : 0;
     
126. imgsloaded += markloaded[m];
     
127. }
     
128. if(imgsloaded == tmpimgs.length) {
     
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,
     
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. }
     
138. }
     3 k: J+ R/ N/ U" R: M, p
139. }
     
140. }, 40);
     
141. }
     
142. } catch(e) {}
     
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. };
     
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. 
     
151. </script>
     : ^/ d! }8 g' E* ~( e- [
152. <!--{/if}-->
     7 K7 r; W" V1 U! N+ C2 v
153. <!--{else}-->
     
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 -->
     
156. 
     
157. <!--{if $_G['setting']['threadmaxpages'] > 1 && $page && !$subforumonly && $page < $_G['setting']['threadmaxpages'] && $page < $_G['page_next']}-->
     
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>
     
160. <!--{/if}-->
     
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}-->
     
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去

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

---

欢迎光临 时尚酷族 (http://www.coqq.net/)

Powered by Discuz! X3.2