时尚酷族

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

---

作者: ＣooL．泪猪    时间: 2012-7-29 23:35
标题: DZX2.0版图片版瀑布流分享
近日看到网上流行的瀑布流，也参照改了下，但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项，直接影响到的是非图片版帖子列表界面，其实没必要把form表单里的所有项都替换，仅替换“else if 图片部分+分页”部分即可。
& `: p2 i, M4 M) k& P为了完整方法跟其他帖写的都一样，为方便新手，操作如下：
# e7 T2 i& Q+ j, h& u5 q2 b
  x0 X! }; Q% ?7 I0 e) [1、将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; }
   # T$ G$ K7 D8 M1 h
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; }
   % T4 N; s6 r5 b4 B% X2 l" ^  e
6. .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
   
7. 
   ' G! c& [! s$ K, u: ~9 }2 Y) E
8. /* 瀑布流布局 by Pony 1204121803 */
   % u9 o6 i/ K9 s
9. .waterfall { position: relative; margin-top: 15px; }
   
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%; }
    
11. .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
    . X5 Z4 \/ v1 N" z: R
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; }
    5 |9 y9 l& O" H8 g" n/ Z! @
14. .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
    6 E& y3 }) G2 _( y9 ~) a5 W9 G
15. .waterfall .auth img { display: inline-block; margin: 0 1px; }
    ) |4 m  c# C9 q9 \

复制代码

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

1. 
   + U9 Q; _( B2 `
2. <!--{else}-->
   
3. </table><!-- end of table "forum_G[fid]" branch 2/3 -->
   1 c8 d# s# Q- A4 _" y! i8 F
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'])}-->
   1 W& _+ F9 r# F$ l, ?' N, ?
7. <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
   $ v1 b4 ?! h% E) d* z6 w0 c
8. <!--{eval $thread[tid]=$thread[closed];}-->
   
9. <!--{/if}-->
   
10. <!--{/if}-->
      y9 u' ?  o1 v2 k
11. <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
    
12. <li style="width:{$waterfallwidth}px;">
    9 v  T$ ^3 ?7 \7 W
13. <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
    
14. <div style="position:absolute;margin:1px;padding:2px;background:#FFF">
    ; o# v* ~& w" B* I
15. <!--{if $thread['fid'] == $_G[fid]}-->
    
16. <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
    1 H4 O) r- W7 V; M8 V$ q
17. <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
    # j8 F9 J& c! a" E8 i0 U4 y
18. <!--{else}-->
    
19. <input type="checkbox" disabled="disabled" />
    
20. <!--{/if}-->
    
21. <!--{else}-->
    
22. <input type="checkbox" disabled="disabled" />
    
23. <!--{/if}-->
    
24. </div>
    
25. <!--{/if}-->
    . s; b  Q% E3 e  B: O/ K& B& h
26. <div class="c cl">
    6 `' W7 M' M4 E. M3 `4 Y' r. c
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">
      T. }- _' X; g+ a$ U! r
28. <!--{if $thread['cover']}-->
    
29. <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
    
30. <!--{else}-->
    - V2 ^0 w* x) P# L
31. <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
    
32. <!--{/if}-->
    
33. </a>
    
34. </div>
    ; o9 Z0 A# _- ?# d$ R. E  `
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>
    
39. <div class="auth cl">
    " w5 m3 n+ Z& M0 _0 A
40. <cite class="xg1 y">
    8 X; y; ?  J6 A( k* Z* C7 h& L
41. {echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
    : l/ ^4 s: r- Y- Z
42. {lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
    
43. </cite>
    
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}-->
    , q! a! \6 `9 s2 p1 S" k: ~$ b  ^
47. <!--{else}-->
    
48. $_G[setting][anonymoustext]
    
49. <!--{/if}-->
    
50. </div>
    
51. </li>
    
52. <!--{/loop}-->
    3 D7 g, S0 C+ I, s& H( M
53. </ul>
    
54. <div id="tmppic" style="display: none;"></div>
    
55. <script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
    
56. <script type="text/javascript" reload="1">
    
57. var wf = {};
    : d+ `" u9 G7 @" X8 j5 t
58. 
    
59. _attachEvent(window, "load", function () {
    
60. if($("waterfall")) {
    % C" \8 g: R  T. j
61. wf = waterfall();
    5 Q0 s' J7 y& I4 x
62. }
    " {1 b: f5 O! `$ f$ H
63. 
    ! j" B- X5 ]7 v1 L. S) l
64. <!--{if $page < $_G['page_next'] && !$subforumonly}-->
    
65. var page = $page + 1,
    
66. maxpage = $page + 10,
    . i, ^! [: a' X+ w) k. \
67. stopload = 0,
    
68. scrolltimer = null,
    1 h; l! v4 {$ W6 i' N) M
69. tmpelems = [],
    0 B7 I7 ^. h) p/ ?- z9 q
70. tmpimgs = [],
    
71. markloaded = [],
    3 @0 W5 @. y3 W' B7 s' Z  l
72. imgsloaded = 0,
    : b* x% t) G6 H! h
73. loadready = 0,
    
74. showready = 1,
    
75. nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd}&page=',
    " K* S2 D/ @+ Q& S
76. wfloading = "<img src=\"{IMGDIR}/loading.gif\" alt=\"\" width=\"16\" height=\"16\" class=\"vm\" /> 加载中...",
    
77. pgbtn = $("pgbtn").getElementsByTagName("a")[0];
    & b) n- \8 I5 i: G1 p3 ]; u0 v
78. 
    
79. function loadmore() {
    
80. var url = nxtpgurl + page + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
    ! W' |, K, ^0 F+ _; B
81. var x = new Ajax("HTML");
    ; P1 n; s6 y7 I6 c; R) \
82. x.get(url, function (s) {
    
83. s = s.replace(/\n|\r/g, "");
    
84. if(s.indexOf("id=\"pgbtn\"") == -1) {
    
85. $("pgbtn").style.display = "none";
    1 k* Z8 }0 Q8 Q% L. a# a$ O
86. stopload++;
    7 r, E, q  l0 x4 K2 K+ E) m
87. window.onscroll = null;
    % P2 @6 Q1 C% }0 ~/ ~' v4 I! Y: M- N
88. }
    
89. 
    
90. s = s.substring(s.indexOf("<ul id=\"waterfall\""), s.indexOf("<div id=\"tmppic\""));
    
91. s = s.replace("id=\"waterfall\"", "");
    ! s2 E) |1 _5 G% P  ?! r5 G8 V  L
92. $("tmppic").innerHTML = s;
    
93. loadready = 1;
    
94. });
    
95. }
    
96. 
    6 r( M. r+ o3 w& l) ~
97. window.onscroll = function () {
    
98. if(scrolltimer == null) {
    * O" P# J3 ~2 _. `: W
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) {
     ' Y; A% J. w: x, ?$ Y: L
102. pgbtn.innerHTML = wfloading;
     7 O' @- {$ P% b6 g& r. e
103. loadready = 0;
     
104. showready = 0;
     
105. loadmore();
     7 f, g/ v! T* h
106. tmpelems = $("tmppic").getElementsByTagName("li");
     + e6 }, K2 O6 {0 f8 `2 @
107. var waitingtimer = setInterval(function () {
     % f5 A! p4 m+ E0 y
108. stopload >= 2 && clearInterval(waitingtimer);
     
109. if(loadready && stopload < 2) {
     
110. if(!tmpelems.length) {
     ( E& _5 i6 J' g% S
111. page++;
     
112. pgbtn.href = nxtpgurl + page;
     
113. pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
     . T( b- R# b& ^& B( q, r! z" L5 |' b- m
114. showready = 1;
     / C3 N1 |8 `- p# |; j
115. clearInterval(waitingtimer);
     
116. }
     
117. for(var i = 0, j = tmpelems.length; i < j; i++) {
     
118. if(tmpelems[i]) {
     
119. tmpimgs = tmpelems[i].getElementsByTagName("img");
     
120. imgsloaded = 0;
     
121. for(var m = 0, n = tmpimgs.length; m < n; m++) {
     1 k; y2 ?7 J$ k5 v
122. tmpimgs[m].onerror = function () {
     8 N2 H! |9 `+ l5 b
123. this.style.display = "none";
     3 p& a  w+ F' t1 h: {+ [$ M9 q
124. };
     
125. markloaded[m] = tmpimgs[m].complete ? 1 : 0;
     3 Z& Z6 w3 @- @* r5 h
126. imgsloaded += markloaded[m];
     
127. }
     
128. if(imgsloaded == tmpimgs.length) {
     
129. $("waterfall").appendChild(tmpelems[i]);
     # D6 M8 |* W$ h: @
130. wf = waterfall({
     
131. "index": wf.index,
     % l8 b% v- p# ^: }
132. "totalwidth": wf.totalwidth,
     ) z4 Y# H! R# z
133. "totalheight": wf.totalheight,
     / \/ F  N" e" c, k: j' ]3 o# A
134. "columnsheight": wf.columnsheight
     
135. });
     ( S: q" D$ g* o; w
136. }
     0 V. ~/ c% S, C2 e7 A' M
137. }
     8 k9 b9 ?( M8 S8 c2 F
138. }
       y% T" b. \4 @" Y5 }
139. }
     
140. }, 40);
     # l, R9 C6 M" l
141. }
     " \$ b/ v- f) _/ w) L1 _/ k6 y
142. } catch(e) {}
     2 k8 k% L+ k; a* m/ P* f
143. scrolltimer = null;
     
144. }, 320);
     
145. }
     9 k* F; k3 Q& t! c
146. };
     & X1 d' a1 i. h. O( k9 }# |8 N* v
147. <!--{/if}-->
     
148. 
     
149. });
     ) U5 `0 K2 v9 M+ r! L! ^: A
150. 
     
151. </script>
     
152. <!--{/if}-->
     3 N% Q$ A* |/ Z- `6 @9 T/ 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>
     
155. </table><!-- end of table "forum_G[fid]" branch 3/3 -->
     
156. 
     % c9 ~7 n) u( M0 R# q
157. <!--{if $_G['setting']['threadmaxpages'] > 1 && $page && !$subforumonly && $page < $_G['setting']['threadmaxpages'] && $page < $_G['page_next']}-->
     
158. <!--{eval $nxtpage = $page + 1;}-->
       h$ o" q% d# ~
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>
     ! l9 h( z3 a4 v0 k
160. <!--{/if}-->
     7 Q5 k0 f5 D0 z' N1 |* [
161. 
     7 t; @- q4 G3 }# M  F
162. <!--{/if}-->
     
163. <!--{if $_G['forum']['ismoderator'] && $_G['forum_threadcount']}-->
     ) b# T( [# O2 i0 {9 P; _
164. <!--{template forum/topicadmin_modlayer}-->
     - s8 e7 X/ E7 l
165. <!--{/if}-->
     + D/ E/ t: D6 O* s. `8 S
166. </form>
     

复制代码

4、后天帖子列表界面，图片宽度设为200，高度9999，相应版块开启图片版即可
. T5 N& M  A0 z+ O' @+ o
  d7 A/ \" c4 v6 `1 Z8 @% B8 y5、如果你需要向下加载的话，需要把分页代码一起复制进forumdisplay_list.htm去

5 Z3 p" R2 _. @- N' U演示：http://www.coqq.net/forum-75-1.html

---

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

Powered by Discuz! X3.2