纯CSS瀑布流代码发布 - Sclub模板修改与美化

[教学] 纯CSS瀑布流代码发布

2018-8-26 21:22 / 19 评论 / 202784 阅读

08/26

预览：http://icode.258club.com/faq.php?ishow=pubu

1、后台建立一个模版命名为pubu
内容是

{subtemplate header}
<div id="nav"><a href="$indexname">$bbname</a> » 瀑布流</div>
<div id="wrap" class="wrap s_clear" style="border: 1px solid #d0d0d0;">
<div id="pubu"><ul id="waterfall" class="waterfall">{eval request('主题列表_瀑布流');}</ul></div>
</div>
<style>
.waterfall{position:relative;margin-left:5px;padding:25px}
#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}
.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%}
.waterfall .c{overflow:hidden;padding-bottom:0;max-height:800px}
.waterfall .c,.waterfall h3{padding:10px;border:solid #EAEAEA;border-width:0 1px;background-color:#F8F8F8}
.waterfall .c,.waterfall h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px;border:solid #EAEAEA;border-width:0 1px;background-color:#F8F8F8}
.waterfall .auth{padding:0 10px 10px;border-width:0 1px 1px;border-style:solid;border-color:transparent #EAEAEA #B9B9B9;background:#F8F8F8}
</style>
{subtemplate footer}

复制

2、后台--工具--数据调用，导入数据调用文件

discuz_request_20180826.rar (1.96 KB)

3、在faq模版最上边加

复制

4、

复制

即是瀑布流页面链接

最近访问

波斯佳人

第 2 楼

前排支持
章鱼之家的我也弄好了

明天再试试你这个

2018-8-26 21:36

麻城生活网

第 3 楼

前排鼎力支持！！！去试一下

2018-8-27 10:15

第 4 楼

好神奇啊，用了无界兄的瀑布流完美解决我昨天的疑难杂症了，厉害了，谁都不服就服无界兄你

2018-8-27 10:20

第 5 楼

回复 4# 麻城生活网

这个不需要jq库，所以安装完就直接可用，很轻量级，效果也很棒。这是我安装后的效果：
http://flashroad.joinbbs.net/faq.php?ishow=pubu

章鱼的虽然麻烦了一点，但是有动态效果，很酷的感觉：
http://flashroad.joinbbs.net/faq.php?zyhome=picwall

2018-8-27 13:13

[教学] 纯CSS瀑布流代码发布