时尚酷族

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

---

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

1. 
   
2. /* 大分页按钮 by Pony 1203121325 */
   
3. .pgbtn { margin: 5px 0 10px; }
   
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; }
   6 g/ ~2 K, P% V. I
5. .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
   8 w. |3 ]( k& G' ]
6. .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
   
7. 
   8 O' G) G1 o6 p% {: Q
8. /* 瀑布流布局 by Pony 1204121803 */
   # Z+ y# \3 w4 n, D
9. .waterfall { position: relative; margin-top: 15px; }
   1 l. }5 K2 x6 Z' D) @5 p
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%; }
    - r9 I" l+ r( ?/ y" G
11. .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
    ) `9 F7 y7 A8 p
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; }
    ( Y& e1 X% s+ p4 X( Y" B* X
15. .waterfall .auth img { display: inline-block; margin: 0 1px; }
    6 X7 v$ r: Z% e4 ?* F* g' x. h

复制代码

3、拷贝qing\forum\forumdisplay_list.htm文件里的“else if 图片部分+分页”替换default里的forumdisplay_list.htm的相应图片部分（即从<!-- end of table "forum_G[fid]" branch 2/3 --> 开始到</form>结束）。

1. 
   
2. <!--{else}-->
   
3. </table><!-- end of table "forum_G[fid]" branch 2/3 -->
   
4. <ul id="waterfall" class="ml waterfall cl">
   
5. <!--{loop $_G['forum_threadlist'] $key $thread}-->
   
6. <!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
   
7. <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
   . d* u+ ?" y' F& F! K3 T( p
8. <!--{eval $thread[tid]=$thread[closed];}-->
   ' p# L7 H- e3 i, m4 N5 T
9. <!--{/if}-->
   
10. <!--{/if}-->
    3 J$ o" [- b+ l; p( S
11. <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
    . g" l. I5 W9 g2 |
12. <li style="width:{$waterfallwidth}px;">
    
13. <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
    & n$ h  z9 @' w& P5 h: ~
14. <div style="position:absolute;margin:1px;padding:2px;background:#FFF">
    ' w% x( T8 Z" v3 C0 c6 n6 ~
15. <!--{if $thread['fid'] == $_G[fid]}-->
    6 j+ @/ r* |4 D' z! e
16. <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
    3 ~9 o; v, |; p' a% L, w% K
17. <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
    
18. <!--{else}-->
    . @" u. s" P9 `; G/ [- c
19. <input type="checkbox" disabled="disabled" />
    - I% g' w3 k" S) m7 V3 V7 F% z
20. <!--{/if}-->
    2 A  n8 G, E0 f
21. <!--{else}-->
    
22. <input type="checkbox" disabled="disabled" />
    
23. <!--{/if}-->
    
24. </div>
    
25. <!--{/if}-->
    
26. <div class="c cl">
    
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">
    6 |8 [% a$ y$ i4 _7 T3 z2 K( q
28. <!--{if $thread['cover']}-->
    
29. <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
    ' {# E$ w0 E9 ^# d3 [' C
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>
    3 V% w8 F# ]7 V4 z
35. <h3 class="xw0">
    2 i- ]: l6 x9 t% f- X% d& a
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>
    ) e( Q* F8 ], p  U8 f9 c
39. <div class="auth cl">
    
40. <cite class="xg1 y">
    " y( n8 N) S5 P. D% U( Z. Q: D
41. {echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
    
42. {lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
    
43. </cite>
    / z& \" u- ~" h( F9 W. C
44. <!--{hook/forumdisplay_author $key}-->
    " ?5 ~" n7 I! T% C  @% }
45. <!--{if $thread['authorid'] && $thread['author']}-->
    4 P7 q, i; ~% O3 `
46. <a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a><!--{if !empty($verify[$thread['authorid']])}--> $verify[$thread[authorid]]<!--{/if}-->
    
47. <!--{else}-->
    7 j* y) ]6 l3 C1 P
48. $_G[setting][anonymoustext]
    
49. <!--{/if}-->
    
50. </div>
    : V! `+ W8 ]3 o+ ?! q3 B5 Y1 ?
51. </li>
    , M' M5 ~5 T9 }/ [
52. <!--{/loop}-->
    ( u6 S8 [/ J" f4 Q. B& ?- @2 i
53. </ul>
      K% Y( [8 }- P' c
54. <div id="tmppic" style="display: none;"></div>
    7 \9 Z- z5 y" D4 U& M7 }3 j5 O
55. <script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
    ' A1 d# w7 e5 O1 \
56. <script type="text/javascript" reload="1">
    - f! q3 ^! t' g. K  e4 j# I9 ~
57. var wf = {};
    
58. 
    
59. _attachEvent(window, "load", function () {
    - i# ~' B& H* H$ J2 D; P
60. if($("waterfall")) {
    
61. wf = waterfall();
    ' b6 v/ J; r  p" f" H: [; m
62. }
    3 r) P+ X- j1 o1 C
63. 
    
64. <!--{if $page < $_G['page_next'] && !$subforumonly}-->
    
65. var page = $page + 1,
    . i! c2 P- x/ Z  N
66. maxpage = $page + 10,
    . X1 L% E' p5 H  R
67. stopload = 0,
    , R4 b* E5 n0 m. _
68. scrolltimer = null,
    
69. tmpelems = [],
    
70. tmpimgs = [],
    
71. markloaded = [],
    + _, B$ r6 i, W7 o* T! k6 y9 U
72. imgsloaded = 0,
    % q8 [1 ?& y4 I6 X9 b
73. loadready = 0,
    
74. showready = 1,
    
75. nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd}&page=',
    
76. wfloading = "<img src=\"{IMGDIR}/loading.gif\" alt=\"\" width=\"16\" height=\"16\" class=\"vm\" /> 加载中...",
    : E4 {0 w& `6 W% f
77. pgbtn = $("pgbtn").getElementsByTagName("a")[0];
    / d& a: C' X" R  [: U& A$ y+ y
78. 
    
79. function loadmore() {
    - U! n( v- q7 u3 G  g' P
80. var url = nxtpgurl + page + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
    
81. var x = new Ajax("HTML");
    % Y, w7 e5 G: N' p
82. x.get(url, function (s) {
    3 \/ `% E5 y# V4 a. \- x
83. s = s.replace(/\n|\r/g, "");
    ) X; V3 y- Z* E0 Y9 k
84. if(s.indexOf("id=\"pgbtn\"") == -1) {
    
85. $("pgbtn").style.display = "none";
    
86. stopload++;
    7 U, x) w$ A- Z' S* x
87. window.onscroll = null;
    
88. }
    
89. 
    + E9 w; A7 C! `2 E& R0 u! g$ r" s
90. s = s.substring(s.indexOf("<ul id=\"waterfall\""), s.indexOf("<div id=\"tmppic\""));
    
91. s = s.replace("id=\"waterfall\"", "");
    5 Y+ p% v4 W3 C7 u6 w
92. $("tmppic").innerHTML = s;
    
93. loadready = 1;
    
94. });
    ! t! m# Y  w3 f
95. }
    $ X8 h/ g0 K9 M) B" p) d
96. 
    
97. window.onscroll = function () {
    
98. if(scrolltimer == null) {
    / U& d4 p/ k7 T, j
99. scrolltimer = setTimeout(function () {
    
100. try {
     
101. if(page < maxpage && stopload < 2 && showready && ((document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight + 500) >= document.documentElement.scrollHeight) {
     7 x1 Z. N; k' S( `1 p  Z
102. pgbtn.innerHTML = wfloading;
     ( O4 h0 z4 r$ }
103. loadready = 0;
     , n3 |& Z. M% g$ v! b. J
104. showready = 0;
     
105. loadmore();
     
106. tmpelems = $("tmppic").getElementsByTagName("li");
     6 Z) R; m) n1 C6 D
107. var waitingtimer = setInterval(function () {
     
108. stopload >= 2 && clearInterval(waitingtimer);
     3 p  r) j, K  Z; T) B
109. if(loadready && stopload < 2) {
     1 _, g; Y1 @9 W
110. if(!tmpelems.length) {
     2 Q1 K' [) E. y& W9 J! Z- i: M! E
111. page++;
     $ C! t7 l8 D" E2 y/ e
112. pgbtn.href = nxtpgurl + page;
     ! L. {. u7 Y+ q! Q2 n
113. pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
     ) G# v% c  _- v7 X$ k( t, y
114. showready = 1;
     
115. clearInterval(waitingtimer);
     & Y, L, N3 X3 n4 o! u# Y/ \3 }
116. }
     
117. for(var i = 0, j = tmpelems.length; i < j; i++) {
     9 U' P; d, g9 b
118. if(tmpelems[i]) {
     
119. tmpimgs = tmpelems[i].getElementsByTagName("img");
     
120. imgsloaded = 0;
     
121. for(var m = 0, n = tmpimgs.length; m < n; m++) {
     
122. tmpimgs[m].onerror = function () {
     7 l0 v6 C, o4 L
123. this.style.display = "none";
     , W- W* n1 I$ W! F  ?$ B* t
124. };
     
125. markloaded[m] = tmpimgs[m].complete ? 1 : 0;
     
126. imgsloaded += markloaded[m];
     " Y- x' n. b4 ]
127. }
     : v, h: D" N$ |6 Q0 ?
128. if(imgsloaded == tmpimgs.length) {
     
129. $("waterfall").appendChild(tmpelems[i]);
     
130. wf = waterfall({
     
131. "index": wf.index,
     ; p. B/ X/ p4 P5 [: m
132. "totalwidth": wf.totalwidth,
     . e; d% l" a7 k. }
133. "totalheight": wf.totalheight,
     % m; `4 a% Y; n- H
134. "columnsheight": wf.columnsheight
     
135. });
     3 k8 }3 d0 z$ d* n/ v
136. }
     : A' ^; _9 e. K  O$ g
137. }
     
138. }
     " x9 S" r, |, P
139. }
     
140. }, 40);
     
141. }
     
142. } catch(e) {}
     
143. scrolltimer = null;
     
144. }, 320);
     8 u& A/ p* @$ V4 I8 ?5 S
145. }
     
146. };
     
147. <!--{/if}-->
     
148. 
     
149. });
     " a& B6 a2 s* Q
150. 
     7 B7 i7 M8 y- b  M* X9 U7 p
151. </script>
     
152. <!--{/if}-->
     7 A2 A; v* o/ m% i. k1 @
153. <!--{else}-->
     5 k. ]! x& {' `
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>
     
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']}-->
     1 t+ m8 u3 H4 b
158. <!--{eval $nxtpage = $page + 1;}-->
     
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. 
     " Y4 v+ ^2 F& E+ I" e; z5 E, k" a
162. <!--{/if}-->
     
163. <!--{if $_G['forum']['ismoderator'] && $_G['forum_threadcount']}-->
     ; \* v( V$ Q( O0 T
164. <!--{template forum/topicadmin_modlayer}-->
     & t2 a0 R- x* A$ Q" N& k# |6 @
165. <!--{/if}-->
     9 {( G5 B& M% s$ j7 a; o8 m; x* u
166. </form>
     ) f( Z  S; U) B4 F% S" e

复制代码

4、后天帖子列表界面，图片宽度设为200，高度9999，相应版块开启图片版即可

0 h8 ~- C8 f8 @5、如果你需要向下加载的话，需要把分页代码一起复制进forumdisplay_list.htm去

5 F3 V- ]$ G1 A( x2 }0 }演示：http://www.coqq.net/forum-75-1.html

---

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

Powered by Discuz! X3.2