时尚酷族

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

---

作者: ＣooL．泪猪    时间: 2012-7-29 23:35
标题: DZX2.0版图片版瀑布流分享
近日看到网上流行的瀑布流，也参照改了下，但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项，直接影响到的是非图片版帖子列表界面，其实没必要把form表单里的所有项都替换，仅替换“else if 图片部分+分页”部分即可。
  u% I/ ~3 s7 A# i为了完整方法跟其他帖写的都一样，为方便新手，操作如下：
0 x( h1 {! K3 S+ Z$ V1 b8 T
1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录，同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
, f" O# A2 a  x5 @& S2、模板目录下增加common\extend_common.css，其内容如下：

1. 
   7 |+ N8 |5 v: @4 ?
2. /* 大分页按钮 by Pony 1203121325 */
   
3. .pgbtn { margin: 5px 0 10px; }
   ' e) |; g% ^  B. w% L
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; }
   3 k, v- _# ?  N" R: Z; w
5. .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
   
6. .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
   . B+ I0 E2 u$ X+ M3 z# v
7. 
   9 z3 F& ?/ H+ _( @" P. f4 {: E- H1 w
8. /* 瀑布流布局 by Pony 1204121803 */
   7 z6 A% X! L3 Q0 F
9. .waterfall { position: relative; margin-top: 15px; }
   3 n7 Y( K' }+ \5 o
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; }
    
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; }
    ' M8 h) J! f3 i0 ~$ J
15. .waterfall .auth img { display: inline-block; margin: 0 1px; }
    

复制代码

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}-->
   7 W1 y) V6 m' h  \9 ?& ^
8. <!--{eval $thread[tid]=$thread[closed];}-->
   
9. <!--{/if}-->
   
10. <!--{/if}-->
    
11. <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
    ! @1 v1 X% D) k: O
12. <li style="width:{$waterfallwidth}px;">
    
13. <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
    
14. <div style="position:absolute;margin:1px;padding:2px;background:#FFF">
    
15. <!--{if $thread['fid'] == $_G[fid]}-->
    : q5 V6 y. ~  ^8 D, K7 Y, j: N
16. <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
    
17. <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
      L7 p4 _4 Y1 Q; U# z: O
18. <!--{else}-->
    # @' z4 ]  s- t$ x
19. <input type="checkbox" disabled="disabled" />
    
20. <!--{/if}-->
    - p2 R6 S3 O) D
21. <!--{else}-->
    & w+ [/ F* ~5 o
22. <input type="checkbox" disabled="disabled" />
    * `: M! M# U4 u" E8 k0 f- v" [; H
23. <!--{/if}-->
    
24. </div>
      Q9 m( f. f: H( i6 E
25. <!--{/if}-->
    # ~+ @6 l7 |  |8 B) U& z; R
26. <div class="c cl">
    7 ]% `" F- H0 [0 a8 h4 X
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">
    
28. <!--{if $thread['cover']}-->
      Q6 j7 b7 E7 E+ [: z; S% h; i/ {- m
29. <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
    2 J5 r. F8 }' A; M
30. <!--{else}-->
    ' b& b# S+ X1 Q: j% @8 g% L
31. <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
    
32. <!--{/if}-->
    ) x, [( X& F) t, k9 J7 F
33. </a>
    
34. </div>
    
35. <h3 class="xw0">
    ' K3 A3 I+ n3 Z8 w6 r
36. <!--{hook/forumdisplay_thread $key}-->
    2 j/ `, ^. h/ k4 }) n
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>
      R' m# M0 a6 f+ h* b; l: I5 _# X
38. </h3>
    
39. <div class="auth cl">
    0 r4 l! D% p$ n
40. <cite class="xg1 y">
    ' D) L' y# O3 B6 T( r$ J! J
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>
    
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}-->
    # \) c7 m9 [: {8 y; L
47. <!--{else}-->
    
48. $_G[setting][anonymoustext]
    1 B9 h" j7 _8 P! ]. g0 n! z' s- P1 D* P
49. <!--{/if}-->
    
50. </div>
    
51. </li>
    ' |2 X8 l) t% w! T; o" ~
52. <!--{/loop}-->
    
53. </ul>
    / ]+ u7 X$ C5 [0 S
54. <div id="tmppic" style="display: none;"></div>
    . }) a* ]) I; s% ^1 L# H% t
55. <script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
    # C" e  f# h  U% x# q
56. <script type="text/javascript" reload="1">
    % b% ?- d+ \8 ]: a% R3 B3 q
57. var wf = {};
    
58. 
    
59. _attachEvent(window, "load", function () {
    
60. if($("waterfall")) {
    1 C" K( }/ o" w" h- k0 V
61. wf = waterfall();
    7 x) x* j- E; w9 E
62. }
    / l) }: s5 }. r% y% m7 p
63. 
    % o& q3 C! x8 j, c$ U
64. <!--{if $page < $_G['page_next'] && !$subforumonly}-->
    8 m0 ]+ a3 E2 j* A# g
65. var page = $page + 1,
    & U" z2 T" G5 e% B; A- G! U
66. maxpage = $page + 10,
    ' n4 e  U- n2 t* z# O* M
67. stopload = 0,
    
68. scrolltimer = null,
    
69. tmpelems = [],
    / h( C# |4 Z* K5 p0 y4 l3 G, `/ O/ B
70. tmpimgs = [],
    1 Q3 V  x9 H& i
71. markloaded = [],
    
72. imgsloaded = 0,
    9 K% d: E3 h/ b- H3 W
73. loadready = 0,
    
74. showready = 1,
    6 k1 a/ D4 G# F) Y% \/ L! s: K
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\" /> 加载中...",
    - u% J  W; Y+ \: B3 N) n
77. pgbtn = $("pgbtn").getElementsByTagName("a")[0];
    
78. 
    . d# \  A" E0 U: b! R3 X5 m0 k
79. function loadmore() {
    4 ~+ u+ N3 o$ |! i
80. var url = nxtpgurl + page + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
    7 O* @8 O$ \7 M* v# M
81. var x = new Ajax("HTML");
    - z- y  X4 T+ F9 p1 x% X2 Q2 f7 Y
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";
    ' N, b2 Y* E5 j
86. stopload++;
    
87. window.onscroll = null;
    1 @$ c( s5 ]* n9 N) L% }( `
88. }
    
89. 
    1 U* @) J5 `. q( T0 ?
90. s = s.substring(s.indexOf("<ul id=\"waterfall\""), s.indexOf("<div id=\"tmppic\""));
    
91. s = s.replace("id=\"waterfall\"", "");
    5 ?% Q( z8 y) F+ }; F
92. $("tmppic").innerHTML = s;
    4 R1 ^/ C3 g; z( P9 q* }- {
93. loadready = 1;
    8 q6 R6 `! |5 U3 v# \
94. });
    
95. }
    
96. 
    
97. window.onscroll = function () {
    
98. if(scrolltimer == null) {
      t- J0 l: u, e
99. scrolltimer = setTimeout(function () {
    
100. try {
       z; @/ j; o, `( N$ n. b
101. if(page < maxpage && stopload < 2 && showready && ((document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight + 500) >= document.documentElement.scrollHeight) {
     
102. pgbtn.innerHTML = wfloading;
     # A5 ~+ {5 l% G8 F
103. loadready = 0;
     
104. showready = 0;
     ( ]" Z" b4 `5 W" F
105. loadmore();
     5 ~. I4 |1 x; x: u5 H/ g
106. tmpelems = $("tmppic").getElementsByTagName("li");
     ; m! W+ @8 `0 L: m: f5 _
107. var waitingtimer = setInterval(function () {
     . D' e# C" L' r, |: F& y
108. stopload >= 2 && clearInterval(waitingtimer);
     # \  w! _/ E- B' U
109. if(loadready && stopload < 2) {
     # W# m" A) Q0 ~' ?
110. if(!tmpelems.length) {
     / @* R4 ?2 n- R  x8 x
111. page++;
     6 N; D! n# A  J* ?9 d
112. pgbtn.href = nxtpgurl + page;
     
113. pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
     
114. showready = 1;
     ' @0 [  h& ^# b( U6 ?- N2 }
115. clearInterval(waitingtimer);
     2 h% Z8 w$ ^* m9 K3 F; g
116. }
     : P; x) K! R! L2 P. ^% C" L6 c8 @
117. for(var i = 0, j = tmpelems.length; i < j; i++) {
     : l6 D  U' Y* \& q
118. if(tmpelems[i]) {
     
119. tmpimgs = tmpelems[i].getElementsByTagName("img");
     
120. imgsloaded = 0;
     9 f7 K* G% J; T% @9 e
121. for(var m = 0, n = tmpimgs.length; m < n; m++) {
     : T1 R* C2 J7 l( ~- S$ w2 f
122. tmpimgs[m].onerror = function () {
     
123. this.style.display = "none";
     
124. };
     $ W/ m5 N( w7 y1 f% D6 B- e  Q
125. markloaded[m] = tmpimgs[m].complete ? 1 : 0;
     
126. imgsloaded += markloaded[m];
     
127. }
     $ A9 ~# ?5 T" y' b
128. if(imgsloaded == tmpimgs.length) {
     
129. $("waterfall").appendChild(tmpelems[i]);
     * i5 T* q7 O' n: e1 D
130. wf = waterfall({
     
131. "index": wf.index,
     
132. "totalwidth": wf.totalwidth,
     & ~) C9 c1 \6 i' ]
133. "totalheight": wf.totalheight,
     3 r  c" ?" j' m0 H) f% i
134. "columnsheight": wf.columnsheight
     % C' b( M7 B( J) q& |8 f
135. });
     
136. }
     
137. }
     
138. }
     1 Q9 a, q* s! h8 N, y
139. }
     
140. }, 40);
     
141. }
     
142. } catch(e) {}
     
143. scrolltimer = null;
     
144. }, 320);
     
145. }
     
146. };
     
147. <!--{/if}-->
     : ?1 _: `5 ~1 h, j4 s9 v: H
148. 
     $ U2 l$ T9 x7 l1 \: c
149. });
     6 H$ q4 F; O% k- l0 w; T& ?) K
150. 
     
151. </script>
     
152. <!--{/if}-->
     
153. <!--{else}-->
     $ k+ s8 Q. i( ~- F0 L4 L2 N
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 -->
     $ Z, r) A5 a( s: u" y- N5 j9 k, `; L
156. 
     ' E  z, e9 a1 y, M7 i
157. <!--{if $_G['setting']['threadmaxpages'] > 1 && $page && !$subforumonly && $page < $_G['setting']['threadmaxpages'] && $page < $_G['page_next']}-->
     
158. <!--{eval $nxtpage = $page + 1;}-->
     8 \" ]! J: Q! ^3 f: O- h6 B" w, \( m/ V
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}-->
       I& U) X; T6 K6 @  p- w+ K2 I+ ]$ U) K
161. 
     
162. <!--{/if}-->
     
163. <!--{if $_G['forum']['ismoderator'] && $_G['forum_threadcount']}-->
     
164. <!--{template forum/topicadmin_modlayer}-->
     - C3 |3 T) t1 S7 k9 y) ^5 x
165. <!--{/if}-->
     
166. </form>
     0 H/ {* m0 {( i

复制代码

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

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

& ~% K$ _6 U' I% T$ ^( k演示：http://www.coqq.net/forum-75-1.html

---

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

Powered by Discuz! X3.2