时尚酷族

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

---

作者: ＣooL．泪猪    时间: 2012-7-29 23:35
标题: DZX2.0版图片版瀑布流分享
近日看到网上流行的瀑布流，也参照改了下，但是网上的forumdisplay_list.htm都是全部替换form表单里的所有项，直接影响到的是非图片版帖子列表界面，其实没必要把form表单里的所有项都替换，仅替换“else if 图片部分+分页”部分即可。
为了完整方法跟其他帖写的都一样，为方便新手，操作如下：

4 r3 d  B4 j& r" H7 i* y1 @' x1、将qing模板目录下\image\redef.js移动至正在使用模板的图片存放目录，同时将qing模板中的bg_waterfall.png、bg_pgbtn.png移动至当前模板图片目录。
2、模板目录下增加common\extend_common.css，其内容如下：

1. 
   
2. /* 大分页按钮 by Pony 1203121325 */
   ; I7 s* z6 m# S) R$ b
3. .pgbtn { margin: 5px 0 10px; }
   ' q3 `' q! C- J
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; }
   2 s4 ~" ]: [7 Q: t# W
6. .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }
   ! }: i" O- ]  `5 Q
7. 
   
8. /* 瀑布流布局 by Pony 1204121803 */
   ' D7 M' A0 |: j5 m5 m
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; }
    
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; }
    " [" [6 |- G+ p) H' G
15. .waterfall .auth img { display: inline-block; margin: 0 1px; }
    & |& X0 w2 \& S1 }! j5 s' E

复制代码

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

1. 
   ' u; X  z9 o5 s: _
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}-->
   ) v, \$ }6 Y- e) Q, H
6. <!--{if !$thread['forumstick'] && ($thread['isgroup'] == 1 || $thread['fid'] != $_G['fid'])}-->
   
7. <!--{if $thread['related_group'] == 0 && $thread['closed'] > 1}-->
   
8. <!--{eval $thread[tid]=$thread[closed];}-->
   . u% N* a1 ]* o+ q. T
9. <!--{/if}-->
   & d' w. h) Q3 C
10. <!--{/if}-->
    
11. <!--{eval $waterfallwidth = $_G[setting][forumpicstyle][thumbwidth] + 24; }-->
    . }8 C/ V/ h3 a6 k3 y  ?
12. <li style="width:{$waterfallwidth}px;">
    ' D& H$ N" ?' P8 B" l
13. <!--{if !$_GET['archiveid'] && $_G['forum']['ismoderator']}-->
    ; C  q/ t% c/ i6 d! `3 @
14. <div style="position:absolute;margin:1px;padding:2px;background:#FFF">
    0 z" G' K  [3 N
15. <!--{if $thread['fid'] == $_G[fid]}-->
    
16. <!--{if $thread['displayorder'] <= 3 || $_G['adminid'] == 1}-->
    9 g4 y. f% ^: h) Z) }
17. <input onclick="tmodclick(this)" type="checkbox" name="moderate[]" value="$thread[tid]" />
    
18. <!--{else}-->
    
19. <input type="checkbox" disabled="disabled" />
    
20. <!--{/if}-->
    
21. <!--{else}-->
    7 F. W* P" t7 t% l  d7 m8 w. ^
22. <input type="checkbox" disabled="disabled" />
    
23. <!--{/if}-->
    
24. </div>
    5 \6 b/ \6 f4 |6 X3 S
25. <!--{/if}-->
    
26. <div class="c cl">
    2 s6 b0 T; M" L) U! |
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']}-->
    
29. <img src="$thread[coverpath]" alt="$thread[subject]" width="{$_G[setting][forumpicstyle][thumbwidth]}" />
    
30. <!--{else}-->
    
31. <span class="nopic" style="width:{$_G[setting][forumpicstyle][thumbwidth]}px; height:{$_G[setting][forumpicstyle][thumbwidth]}px;"></span>
    ' t* `! w  x( }
32. <!--{/if}-->
    
33. </a>
    
34. </div>
    # W9 B6 I4 U2 ~1 x2 w2 d" x
35. <h3 class="xw0">
    - C2 z+ [7 f2 ~1 b, a! Y
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>
    & _7 D/ i* G5 j9 H2 _5 P
39. <div class="auth cl">
    % @2 x( ]! [/ x8 j
40. <cite class="xg1 y">
    0 i7 j( N2 A3 Q
41. {echo '喜欢'}: <!--{if $thread[recommends]}-->$thread[recommends]<!--{else}-->0<!--{/if}-->
    ( L6 X! ]5 G/ n( l  w
42. {lang reply}: <a href="forum.php?mod=viewthread&tid=$thread[tid]&extra=$extra" title="$thread[replies] {lang reply}">$thread[replies]</a>
    8 l1 h' {  E9 Y
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}-->
    
47. <!--{else}-->
    . |. {* q/ u7 ~
48. $_G[setting][anonymoustext]
    
49. <!--{/if}-->
    
50. </div>
    
51. </li>
    
52. <!--{/loop}-->
    9 C. P( b' P+ h
53. </ul>
    + e$ A" u4 V1 Y9 g; N$ c- ~: Z
54. <div id="tmppic" style="display: none;"></div>
    
55. <script type="text/javascript" src="$_G['style']['styleimgdir']/redef.js?{VERHASH}"></script>
    0 I  n7 ^* w2 G0 i' V& _
56. <script type="text/javascript" reload="1">
    
57. var wf = {};
    
58. 
    , w8 r. e2 L0 Q! T
59. _attachEvent(window, "load", function () {
    + M" p. P) F2 Q/ l) A& y% p
60. if($("waterfall")) {
    
61. wf = waterfall();
    : U4 b* k. I/ u+ ~+ v/ `
62. }
    % B2 f3 F; S! q
63. 
    
64. <!--{if $page < $_G['page_next'] && !$subforumonly}-->
    
65. var page = $page + 1,
    : s  Y1 O& J0 b8 I- u1 y, q7 G
66. maxpage = $page + 10,
    / ?( S8 \. t% X7 u, N& E  J! J
67. stopload = 0,
    
68. scrolltimer = null,
    6 W% ?  [" E" k4 r, [3 v
69. tmpelems = [],
    9 y6 ]3 J  J" n0 q$ ^
70. tmpimgs = [],
    + l& Q; T1 g$ |6 r
71. markloaded = [],
    
72. imgsloaded = 0,
    8 Y( p. l; }. p
73. loadready = 0,
    1 c: n, u; B* N8 a- u$ E% u9 @
74. showready = 1,
      _6 [* h. N/ M( `) n
75. nxtpgurl = 'forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd}&page=',
    ! C/ \# O% [: G& |: d( \
76. wfloading = "<img src=\"{IMGDIR}/loading.gif\" alt=\"\" width=\"16\" height=\"16\" class=\"vm\" /> 加载中...",
    % k5 z7 l' M7 _2 i( m! ?
77. pgbtn = $("pgbtn").getElementsByTagName("a")[0];
    5 m8 Q' c" D0 z. d
78. 
    
79. function loadmore() {
    % S& W, D# D4 u  \0 d- I
80. var url = nxtpgurl + page + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
    
81. var x = new Ajax("HTML");
    
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";
    6 s5 ^5 R- P  w
86. stopload++;
    " M# Y5 k6 t  W6 a4 e* P
87. window.onscroll = null;
    / S' l# j3 [7 D( u3 ^7 E: M
88. }
    
89. 
    
90. s = s.substring(s.indexOf("<ul id=\"waterfall\""), s.indexOf("<div id=\"tmppic\""));
    ( i# r) l$ V' @) r0 U  L. b
91. s = s.replace("id=\"waterfall\"", "");
    7 o/ I, \* N* [: S$ H5 ]
92. $("tmppic").innerHTML = s;
    
93. loadready = 1;
    9 C- \: [. d4 t( _) E4 M) j
94. });
    / J+ s* O0 q6 B) N6 u3 b
95. }
    
96. 
    * ?! T) ~1 g  ]) L/ \4 v
97. window.onscroll = function () {
    
98. if(scrolltimer == null) {
    " @5 Z- ~) G7 f5 |. c' L# y
99. scrolltimer = setTimeout(function () {
    
100. try {
     5 }* p4 i5 n$ E! A& R, X) \
101. if(page < maxpage && stopload < 2 && showready && ((document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight + 500) >= document.documentElement.scrollHeight) {
     
102. pgbtn.innerHTML = wfloading;
     
103. loadready = 0;
     : f, R% G' B! s4 Y  K
104. showready = 0;
     0 A2 h: k+ D3 n6 Z
105. loadmore();
     
106. tmpelems = $("tmppic").getElementsByTagName("li");
     + X5 l7 E* H; X, R8 e& M- H
107. var waitingtimer = setInterval(function () {
     + S( o# W( j$ o
108. stopload >= 2 && clearInterval(waitingtimer);
     
109. if(loadready && stopload < 2) {
     , v  L5 W2 g1 I; D! q
110. if(!tmpelems.length) {
     / r* H: u9 N/ \8 Q
111. page++;
     
112. pgbtn.href = nxtpgurl + page;
     # d% z) F9 {. c
113. pgbtn.innerHTML = "{echo '下一页 &raquo;'}";
     ; @# X7 y4 d8 O$ K- j) v0 A. l* [' g
114. showready = 1;
     
115. clearInterval(waitingtimer);
     . W, H3 _* |( Z4 h
116. }
     
117. for(var i = 0, j = tmpelems.length; i < j; i++) {
     
118. if(tmpelems[i]) {
     , L7 b& o" K; L/ ^
119. tmpimgs = tmpelems[i].getElementsByTagName("img");
     
120. imgsloaded = 0;
     . j4 L" S0 J3 k
121. for(var m = 0, n = tmpimgs.length; m < n; m++) {
     
122. tmpimgs[m].onerror = function () {
     
123. this.style.display = "none";
     
124. };
     * R' H2 z- x' k' J8 X1 i
125. markloaded[m] = tmpimgs[m].complete ? 1 : 0;
     0 r, ?3 Q+ z" G6 x4 u
126. imgsloaded += markloaded[m];
     4 e2 x7 A" Z" q+ s9 l
127. }
     
128. if(imgsloaded == tmpimgs.length) {
     , ~2 J+ J+ r: t$ \- [8 ?
129. $("waterfall").appendChild(tmpelems[i]);
     ) ~$ F$ V: H& Y
130. wf = waterfall({
     
131. "index": wf.index,
     
132. "totalwidth": wf.totalwidth,
     ( g4 U1 j+ t" }6 W+ U4 r
133. "totalheight": wf.totalheight,
     ; g7 }9 |8 a5 T- y6 ^! F
134. "columnsheight": wf.columnsheight
     
135. });
     
136. }
     
137. }
     5 M' A! y! @2 W4 l  y7 @  e
138. }
     
139. }
     
140. }, 40);
     
141. }
     + }7 _/ V) ^& |/ ]6 \
142. } catch(e) {}
     ; m1 L3 h8 e1 S' j  w6 s
143. scrolltimer = null;
     9 Q( e: c8 _0 P, j: R
144. }, 320);
     1 c- }2 y$ j7 w! c$ {8 d
145. }
     ( x  [6 U% Z* i9 `! t/ I8 M, ^9 U7 b
146. };
     
147. <!--{/if}-->
     
148. 
     
149. });
     
150. 
     
151. </script>
     
152. <!--{/if}-->
     % j8 |- q" a. t/ m( z  Z8 n
153. <!--{else}-->
     # J9 {1 [/ o. M
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 -->
     / x5 }' f4 p2 |- e& R" I
156. 
     + m" D1 u6 y; c9 b8 d
157. <!--{if $_G['setting']['threadmaxpages'] > 1 && $page && !$subforumonly && $page < $_G['setting']['threadmaxpages'] && $page < $_G['page_next']}-->
     & K$ L: f; t1 K) l7 y
158. <!--{eval $nxtpage = $page + 1;}-->
     # x& B* Z! d* U  Y" r5 g6 i
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}-->
     : s; n2 }. Z$ F# S2 k$ p4 M
161. 
     " f- }* V0 J2 P3 x# m$ [& _
162. <!--{/if}-->
     ) M3 {6 |; D9 @; M% _% {
163. <!--{if $_G['forum']['ismoderator'] && $_G['forum_threadcount']}-->
     
164. <!--{template forum/topicadmin_modlayer}-->
     
165. <!--{/if}-->
     
166. </form>
     

复制代码

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

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

+ Z+ X+ y6 P. o0 X2 ?演示：http://www.coqq.net/forum-75-1.html

---

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

Powered by Discuz! X3.2