瀑布流--章鱼之家版本 本文来自：★flash之路-flash技术交流★ 转帖请注明出处！ 作者：flashroad 您是第2304个浏览者 flashroad友情提示：“点评”不是“回帖”！

flashroad

【版权】
http://zyhome.66rt.com/thread-24853-1-1.html

声明：本站使用该效果后，只有图片墙的效果，但是根本“流动”不起来【向下滑动页面时，图片不扩展，始终是那几个图片】
经测试，是章鱼之家发布的代码有问题，我给稍微修整了一下，已经可以实现“流动”的效果，但是用遨游浏览器会卡死【火狐浏览器不会卡死】，不知道如何解决

flashroad

图片墙的访问地址是

  http://你的论坛/faq.php?zyhome=picwall

flashroad

在最下面加上

1. /*----------瀑布流布局by章鱼之家---------------*/
   
2.     #zypw_box,#zypw_box h3{margin:0;padding:0;list-style:none;font:bold 12px "微软雅黑";}
   
3.     #zypw_box{position:relative;}
   
4.     .zypw_item{position:absolute;background:#fff;border:solid 1px #ccc;text-align:center;padding:10px;left:0px;top:0;width:200px;}
   
5.     .zypw_item h3{padding-top:8px;}
   
6.     .zypw_item img{width:200px;height:auto;display:block;border:0;max-height:500px;}
   
7.     .zypw_item{-webkit-transition:all .7s ease-out .1s;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out .1s;transition:all .7s ease-out .1s;}

复制

flashroad

在最上面加上     

{subtemplate aa_zyhome_picwall}

flashroad

1. {eval $zyhome=$_GET["zyhome"];}
   
2. <!--{if $zyhome=="picwall"}-->
   
3. {eval $zyact=$_GET["zyact"];}
   
4. <!--{if ($zyact=="ajax")}-->
   
5. {eval $page=$_GET["page"];}
   
6. {eval $q2 = $db->query("SELECT t.tid,t.subject,a.attachment FROM cdb_threads t LEFT JOIN cdb_attachments a ON a.tid=t.tid WHERE t.attachment=2 ORDER BY t.tid DESC LIMIT ".(20+$page*10).",10");}
   
7. {eval $zyhomeshow=Array();}
   
8. {eval $i=0;}
   
9. {eval while ($asdfgh=$db->fetch_array($q2)) $zyhomeshow[$i++] = $asdfgh;}
   
10. <!--{loop $zyhomeshow $key $thing}-->
    
11.         <div class="zypw_item">
    
12.                 <a href="viewthread.php?tid=$thing[tid]"><img src="attachments/$thing[attachment]" onload="zypw_imgload()"></a>
    
13.                 <h3>$thing['subject']</h3>
    
14.         </div>
    
15. <!--{/loop}-->
    
16. {eval die;}
    
17. <!--{/if}-->
    
18. {subtemplate header}
    
19. <div id="nav"><strong>照片墙V1.0</strong> copyright by 章鱼之家</div>
    
20. <div id="wrap" class="wrap s_clear">
    
21. <div class="main">
    
22. <div class="content">
    
23. <ul class="s_clear baks" id="baks">
    
24. {template index_header}
    
25. <div class="itemtitle s_clear">
    
26.         
    
27.         <!--{if $indextype}-->
    
28.                 {subtemplate index_navbar}
    
29.         <!--{/if}-->
    
30. </div>
    
31. </ul>
    
32. {eval $q2 = $db->query("SELECT t.tid,t.subject,a.attachment FROM cdb_threads t LEFT JOIN cdb_attachments a ON a.tid=t.tid WHERE t.attachment=2 ORDER BY t.tid DESC LIMIT 0,30");}
    
33. {eval $zyhomeshow=Array();}
    
34. {eval $i=0;}
    
35. {eval while ($asdfgh=$db->fetch_array($q2)) $zyhomeshow[$i++] = $asdfgh;}
    
36. <div id="zypw_box">
    
37. <!--{loop $zyhomeshow $key $thing}-->
    
38.         <div class="zypw_item">
    
39.                 <a href="viewthread.php?tid=$thing[tid]"><img src="attachments/$thing[attachment]"></a>
    
40.                 <h3>$thing['subject']</h3>
    
41.         </div>
    
42. <!--{/loop}-->
    
43. </div>
    
44. <script src="http://flashroad.joinbbs.net/templates/sea/zy_waterfall.htm"></script>
    
45. </div>
    
46. </div>
    
47. </div>
    
48. {subtemplate footer}
    
49. {eval die;}
    
50. <!--{/if}-->

复制

修改了44行。原代码是调用章鱼之家的，他那个被调用的文件有问题，导致了图片“不流”，我给稍微修改了一下，修正了这个bug。
你可以将我的这个模板传到自己论坛，然后调用

flashroad

重要：jq库是本代码得以正常运行的前提，不安装的话，后续步骤都是无意义的
===============================================
因为章鱼之家的jq库弄了很多垃圾信息，导致运行缓慢！
所以我倾向于用官方的jq库。但是这个效果不用章鱼的没有效果！所以我将章鱼的优化了一下。


在这里，下面的两个jq库你任选其一。不要两者同时选用！两个都是有效果的！

=================================================

【选择1】这是章鱼之家的jq库安装方法：

代码放在其他头部信息即可
   <script src='http://zyhome.66rt.com/templates/out/jquery.htm'></script>




================================================
【选择2】这是本站用的jq库：

代码放在其他头部信息即可
<script src='http://flashroad.joinbbs.net/templates/colors/jq.htm'></script>

【友情提示】章鱼的jq需要调用三个外部文件！ 我的水平有限，也是完全仿照章鱼的进行修改的！也是调用三个外部文件。
你打开上面的链接就可以知道调用的是哪三个文件了