免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: 瀑布流--章鱼之家版本 [打印本页]
作者: flashroad    时间: 2018-8-26 14:33     标题: 瀑布流--章鱼之家版本

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

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

重要：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需要调用三个外部文件！ 我的水平有限，也是完全仿照章鱼的进行修改的！也是调用三个外部文件。
你打开上面的链接就可以知道调用的是哪三个文件了
作者: flashroad    时间: 2018-8-26 14:45     标题: 二、新建一个名为aa_zyhome_picwall的模板

  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    时间: 2018-8-26 14:45     标题: 三、编辑faq模板

在最上面加上     

{subtemplate aa_zyhome_picwall}
作者: flashroad    时间: 2018-8-26 14:46     标题: 四、编辑css_common模板

在最下面加上
  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    时间: 2018-8-26 14:47     标题: 五、如何使用

图片墙的访问地址是

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



欢迎光临 flash之路-flash技术交流 (http://flashroad.joinbbs.net/) Powered by Discuz! 7.2