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

标题: [教学] 纯CSS瀑布流代码发布 [打印本页]
作者: icode    时间: 2018-8-26 21:22     标题: 纯CSS瀑布流代码发布

爱秀代码 爱代码_icode_sclub代码_discuz7.2代码.png

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

1、后台建立一个模版命名为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}-->
复制
2、后台--工具--数据调用，导入数据调用文件
discuz_request_20180826.rar (1.96 KB)

3、在faq模版最上边加
  1. {subtemplate pubu}
复制
4、
  1. http://你的论坛地址/faq.php?ishow=pubu
复制
即是瀑布流页面链接

附件: discuz_request_20180826.rar (2018-8-26 21:19, 1.96 KB) / 下载次数 55
http://icode.258club.com/attachment.php?aid=113&k=ee4329af1c48cb39fe393b34a686316f&t=1749895677&sid=f0Neuc

图片附件: 爱秀代码 爱代码_icode_sclub代码_discuz7.2代码.png (2018-8-26 21:21, 684.66 KB) / 下载次数 18900
http://icode.258club.com/attachment.php?aid=114&k=f5e914e1e1903ca3e7d2d49429197673&t=1749895677&sid=f0Neuc

作者: 波斯佳人    时间: 2018-8-26 21:36

前排支持
章鱼之家的我也弄好了
明天再试试你这个
作者: 麻城生活网    时间: 2018-8-27 10:15

前排鼎力支持！！！去试一下
作者: 麻城生活网    时间: 2018-8-27 10:20

好神奇啊，用了无界兄的瀑布流完美解决我昨天的疑难杂症了，厉害了，谁都不服就服无界兄你
作者: 波斯佳人    时间: 2018-8-27 13:13

回复 4# 麻城生活网

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

章鱼的虽然麻烦了一点，但是有动态效果，很酷的感觉：
http://flashroad.joinbbs.net/faq.php?zyhome=picwall
作者: icode    时间: 2018-8-27 13:19

回复 5# 波斯佳人


    我这个可以自适应页面宽度
作者: 波斯佳人    时间: 2018-8-27 15:20

回复 6# icode

现在在手机端，无聊是放大缩小，还是横屏竖屏，都是一行内四列
难道只在电脑端自适应的吗
作者: icode    时间: 2018-8-27 15:23

回复 7# 波斯佳人


    是根据浏览器页面大小自适应
作者: 麻城生活网    时间: 2018-8-27 16:18

回复 8# icode


    各有千秋，都很赞，但我选择无界兄的，我喜欢简单点的
作者: 波斯佳人    时间: 2018-8-27 16:27

回复 8# icode

那就是只在电脑端自适应了？
可惜我大多数情况下都在手机端
作者: 麻城生活网    时间: 2018-8-27 16:33

回复 10# 波斯佳人


    我手机端完美展现
作者: bjwujie    时间: 2018-8-28 01:07

提示: 作者被禁止或删除 内容自动屏蔽
作者: 波斯佳人    时间: 2018-8-28 10:24

回复 11# 麻城生活网


    我在电脑端看了一下，章鱼的也支持自适应
不过手机端真心看不出自适应效果，你如何操作的
作者: 麻城生活网    时间: 2018-8-28 11:10

回复 13# 波斯佳人

我没有做任何操作啊，我就是电脑端按无界兄的教程操作的，手机端上也完美支持

不知道是不是浏览器原因，我的是苹果自带的浏览器
作者: 波斯佳人    时间: 2018-8-28 11:12

回复 14# 麻城生活网


    自适应啊
苹果的浏览器窗口，难道不是全屏的，可以和电脑上一样，随意的更改大小吗？
作者: 麻城生活网    时间: 2018-8-28 11:19

回复 15# 波斯佳人


    安卓的我没试过，其他的浏览器我也没试过，但是我在我的手机上看你论坛无界的瀑布流一切正常，章鱼的差点没把我吓死，瞎几把跳
作者: 波斯佳人    时间: 2018-8-28 11:22

回复 16# 麻城生活网

我已无力吐槽
自适应 自适应 自适应
作者: 邹城老王    时间: 2020-2-10 17:01

作者: 东窗凝月    时间: 2020-5-5 20:38

我连1个金钱都没有……
作者: 小豪    时间: 2020-7-21 14:47

看帖回帖那是一定要的：哇！你真有才！




欢迎光临 爱秀代码 (http://icode.258club.com/) Powered by Discuz! 7.2