章鱼之家瀑布流代码 [复制链接]

mc0713

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



一、本代码需要jq库


重要：jq库是本代码得以正常运行的前提，不安装的话，后续步骤都是无意义的
===============================================
因为章鱼之家的jq库弄了很多垃圾信息，导致运行缓慢！
所以我用的是官方的jq库。
或许是这个原因导致“不流”的？下面的两个jq库你任选其一。不要两者同时选用！

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

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

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



================================================
【选择2】这是flash之路用的jq库：
http://flashroad.joinbbs.net/thread-970-1-1.html


二、新建一个名为aa_zyhome_picwall的模板

{eval $zyhome=$_GET["zyhome"];}
<!--{if $zyhome=="picwall"}-->
{eval $zyact=$_GET["zyact"];}
<!--{if ($zyact=="ajax")}-->
{eval $page=$_GET["page"];}
{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");}
{eval $zyhomeshow=Array();}
{eval $i=0;}
{eval while ($asdfgh=$db->fetch_array($q2)) $zyhomeshow[$i++] = $asdfgh;}
<!--{loop $zyhomeshow $key $thing}-->
       <div class="zypw_item">
                <a href="viewthread.php?tid=$thing[tid]"><img src="attachments/$thing[attachment]" onload="zypw_imgload()"></a>
                <h3>$thing['subject']</h3>
        </div>
<!--{/loop}-->
{eval die;}
<!--{/if}-->
{subtemplate header}
<div id="nav"><strong>照片墙V1.0</strong> copyright by 章鱼之家</div>
<div id="wrap" class="wrap s_clear">
<div class="main">
<div class="content">
<ul class="s_clear baks" id="baks">
{template index_header}
<div class="itemtitle s_clear">
      <p class="right forumcount">
{lang index_today}: <em>$todayposts</em>，{lang index_yesterday}: <em>$postdata[0]</em>，
{eval request('内部调用_论坛统计');}
{eval request('内部调用_欢迎新会员');}
       </p>
       <!--{if $indextype}-->
                {subtemplate index_navbar}
        <!--{/if}-->
</div>
</ul>
{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");}
{eval $zyhomeshow=Array();}
{eval $i=0;}
{eval while ($asdfgh=$db->fetch_array($q2)) $zyhomeshow[$i++] = $asdfgh;}
<div id="zypw_box">
<!--{loop $zyhomeshow $key $thing}-->
        <div class="zypw_item">
<a href="viewthread.php?tid=$thing[tid]"><img src="attachments/$thing[attachment]"></a>
                <h3>$thing['subject']</h3>
       </div>
<!--{/loop}-->
</div>
<script src="http://zyhome.66rt.com/templates/out/js3_003waterfall.htm"></script>
</div>
</div>
</div>
{subtemplate footer}
{eval die;}
<!--{/if}-->

三、编辑faq模板


在最上面加上     

{subtemplate aa_zyhome_picwall}

四、编辑css_common模板


在最下面加上

/*----------瀑布流布局by章鱼之家---------------*/
#zypw_box,#zypw_box h3{margin:0;padding:0;list-style:none;font:bold 12px "微软雅黑";}
#zypw_box{position:relative;}
.zypw_item{position:absolute;background:#fff;border:solid 1px #ccc;text-align:center;padding:10px;left:0px;top:0;width:200px;}
.zypw_item h3{padding-top:8px;}
.zypw_item img{width:200px;height:auto;display:block;border:0;max-height:500px;}
.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;}

最后浏览器输入http://你的论坛地址/faq?zyhome=picwall