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

标题: 图片墙--爱秀代码版本 [打印本页]
作者: flashroad    时间: 2018-8-27 12:55     标题: 图片墙--爱秀代码版本

【版权】
http://icode.258club.com/thread-22-1-1.html


图片墙 和 瀑布流 是一个意思，本站同时使用了这两个，为了区分它们，所以用两种称谓

测试发现，爱秀代码的图片墙没有动态效果，但是胜在安装简单，且不需要jq库，很轻量级
作者: flashroad    时间: 2018-8-27 12:57     标题: 一、新建一个名为pubu的模版

  1. <!--{if ($_GET["ishow"]=="pubu")}-->
  2. {subtemplate header}
  3. <div id="nav"><a href="$indexname">$bbname</a> &raquo; 瀑布流</div>
  4. <div id="wrap" class="wrap s_clear" style="border: 1px solid #d0d0d0;">
  5. <div id="pubu"><ul id="waterfall"  class="waterfall">{eval request('主题列表_瀑布流');}</ul></div>
  6. </div>

  8. <style>
  9. .waterfall{position:relative;margin-left:5px;padding:25px}
  10. #pubu ul{-webkit-column-width:225px;-moz-column-width:225px;-o-colum-width:225px;column-width:225px;-webkit-column-gap:1px;-moz-column-gap:1px;-o-column-gap:1px;column-gap:1px}
  11. .waterfall li{display:inline-block;width:215px;overflow:hidden;margin:0 10px 10px 0;padding:0 0 3px;text-align:left;border-width:1px 0 0;border-top:1px solid #EAEAEA;background:url(http://ojmch6oeb.bkt.clouddn.com/image/bg.png) no-repeat 100% 100%}
  12. .waterfall .c{overflow:hidden;padding-bottom:0;max-height:800px}
  13. .waterfall .c,.waterfall h3{padding:10px;border:solid #EAEAEA;border-width:0 1px;background-color:#F8F8F8}
  14. .waterfall .c,.waterfall h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px;border:solid #EAEAEA;border-width:0 1px;background-color:#F8F8F8}
  15. .waterfall .auth{padding:0 10px 10px;border-width:0 1px 1px;border-style:solid;border-color:transparent #EAEAEA #B9B9B9;background:#F8F8F8}
  16. </style>
  17. {subtemplate footer}
  18. <!--{/if}-->
复制
这里面用到了一个背景图片，最好下载下来，替换一下访问路径：
[attach]1103[/attach]
图片分辨率太小，可能你忽略了？图片在本行文字的上面一行就是
作者: flashroad    时间: 2018-8-27 13:00     标题: 二、工具--数据调用，导入数据调用文件

[attach]1104[/attach]
作者: flashroad    时间: 2018-8-27 13:00     标题: 三、编辑faq模版

最上边添加
{subtemplate pubu}
作者: flashroad    时间: 2018-8-27 13:01     标题: 四、如何访问图片墙

  1. http://你的论坛地址/faq.php?ishow=pubu
复制




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