爱秀代码's Archiver

icode 发表于 2018-8-26 21:22

纯CSS瀑布流代码发布

[attach]114[/attach]

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

1、后台建立一个模版命名为pubu
内容是[code]<!--{if ($_GET["ishow"]=="pubu")}-->
{subtemplate header}
<div id="nav"><a href="$indexname">$bbname</a> &raquo; 瀑布流</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}
<!--{/if}-->[/code]2、后台--工具--数据调用,导入数据调用文件
[attach]113[/attach]

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

波斯佳人 发表于 2018-8-26 21:36

前排支持
章鱼之家的我也弄好了{:3_46:}
明天再试试你这个{:3_46:}

麻城生活网 发表于 2018-8-27 10:15

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

麻城生活网 发表于 2018-8-27 10:20

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

波斯佳人 发表于 2018-8-27 13:13

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=171&ptid=22]4#[/url] [i]麻城生活网[/i] [/b]

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

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

icode 发表于 2018-8-27 13:19

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=193&ptid=22]5#[/url] [i]波斯佳人[/i] [/b]


    我这个可以自适应页面宽度

波斯佳人 发表于 2018-8-27 15:20

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=194&ptid=22]6#[/url] [i]icode[/i] [/b]

现在在手机端,无聊是放大缩小,还是横屏竖屏,都是一行内四列
难道只在电脑端自适应的吗

icode 发表于 2018-8-27 15:23

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=196&ptid=22]7#[/url] [i]波斯佳人[/i] [/b]


    是根据浏览器页面大小自适应

麻城生活网 发表于 2018-8-27 16:18

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=197&ptid=22]8#[/url] [i]icode[/i] [/b]


    各有千秋,都很赞,但我选择无界兄的,我喜欢简单点的

波斯佳人 发表于 2018-8-27 16:27

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=197&ptid=22]8#[/url] [i]icode[/i] [/b]

那就是只在电脑端自适应了?
可惜我大多数情况下都在手机端{:3_51:}

麻城生活网 发表于 2018-8-27 16:33

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=200&ptid=22]10#[/url] [i]波斯佳人[/i] [/b]


    我手机端完美展现

bjwujie 发表于 2018-8-28 01:07

**** 作者被禁止或删除 内容自动屏蔽 ****

波斯佳人 发表于 2018-8-28 10:24

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=202&ptid=22]11#[/url] [i]麻城生活网[/i] [/b]


    我在电脑端看了一下,章鱼的也支持自适应
不过手机端真心看不出自适应效果,你如何操作的

麻城生活网 发表于 2018-8-28 11:10

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=258&ptid=22]13#[/url] [i]波斯佳人[/i] [/b]

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

不知道是不是浏览器原因,我的是苹果自带的浏览器

波斯佳人 发表于 2018-8-28 11:12

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=269&ptid=22]14#[/url] [i]麻城生活网[/i] [/b]


    自适应啊
苹果的浏览器窗口,难道不是全屏的,可以和电脑上一样,随意的更改大小吗?

麻城生活网 发表于 2018-8-28 11:19

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=271&ptid=22]15#[/url] [i]波斯佳人[/i] [/b]


    安卓的我没试过,其他的浏览器我也没试过,但是我在我的手机上看你论坛无界的瀑布流一切正常,章鱼的差点没把我吓死,瞎几把跳

波斯佳人 发表于 2018-8-28 11:22

[b]回复 [url=http://icode.258club.com/redirect.php?goto=findpost&pid=274&ptid=22]16#[/url] [i]麻城生活网[/i] [/b]

我已无力吐槽
自适应 自适应 自适应

邹城老王 发表于 2020-2-10 17:01

[img]http://ojmch6oeb.bkt.clouddn.com/image/bg.png[/img]

东窗凝月 发表于 2020-5-5 20:38

我连1个金钱都没有……

小豪 发表于 2020-7-21 14:47

[quote]看帖回帖那是一定要的:[img]http://icode.258club.com/images/smilies/007/06.gif[/img]哇!你真有才![/quote]

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.