SCLUB/Discuz! 7.2纯CSS瀑布流代码

9528

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

1. <!--{if ($_GET["ishow"]=="pubu")}-->
   
2. {subtemplate header}
   
3. <div id="nav"><a href="$indexname">$bbname</a> » 瀑布流</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><style>
   
7. .waterfall{position:relative;margin-left:5px;padding:25px}
   
8. #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}
   
9. .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%}
   
10. .waterfall .c{overflow:hidden;padding-bottom:0;max-height:800px}
    
11. .waterfall .c,.waterfall h3{padding:10px;border:solid #EAEAEA;border-width:0 1px;background-color:#F8F8F8}
    
12. .waterfall .c,.waterfall h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:10px;border:solid #EAEAEA;border-width:0 1px;background-color:#F8F8F8}
    
13. .waterfall .auth{padding:0 10px 10px;border-width:0 1px 1px;border-style:solid;border-color:transparent #EAEAEA #B9B9B9;background:#F8F8F8}
    
14. </style>
    
15. {subtemplate footer}
    
16. <!--{/if}-->

复制代码

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


3、在faq模版最上边加


{subtemplate pubu}


4、瀑布流页面链接

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

数据调用里边的img的高度不能写100%，改为  height: auto;  可以改变图片大小