深夜里，来给喜欢瀑布流的站长朋友们一些真正的惊喜（真正官方默认模版可使用瀑布流）

最近很多人都在瀑布流瀑布流的追逐着，前天为了省事，直接给朋友的网站装了晴模版开启了瀑布流，结果我那朋友说效果很好，于是乎勾起来了我想把另一朋友的站的非晴模版也处理成瀑布流。当然一有想法肯定是先搜索最省事了，因为有现成的肯定拿现成的{:soso_e113:}。昨晚折腾了，几乎把官方很多贴说设置成功的方法都操作了一遍，最后后台的更新按钮都快被自己按坏了.结果还是没成功的，几乎到最后都是出现错位的现象，其实也不应该叫错位，因为那只是没设置定位导致，所以每排都自动换行了，具体错误效果如下：


由于昨天有会要开，所以几乎设置一遍没成功后就放弃了，直到刚才逛DZ的时候又刷到瀑布流的问题贴，结果又把心情给勾引起来了，回想了昨天的经历后，似乎想到了是因为被自动换行了，所以回到我朋友的网站开了显示的代码后再一对比发现问题出现了，晴模版的每个li标签都会被jS自动输出left: 0; position: absolute; top: 某倍数的高度值; 所以几乎问题就解决了，会出现以上图片错误问题的要么就是论坛里的教程贴的发布者或是使用没正确引用到JS或是复制代码时候出现的问题导致无法正确使用JS输出left: 0; position: absolute; top: 某倍数的高度值; 所以才出现的问题

可见演示地址：http://www.xmmyd.com/forum-97-1.html

大致浏览器稍微做了测试基本都已经兼容不会出现那所谓的错位了
有IP的送IP，有金币的也送点好多了，不求多一个就好{:soso_e128:}

出现问题的情况描述完后，来看下具体教程// http://www.bugplexus.com整理//


1、  images里的图片可根据以下CSS路径的修改而修改：

往你当前所使用的风格里加入以下CSS代码

1. /* 瀑布流布局 */
   
2. .waterfall { position: relative; margin-top: 15px; }
   
3. .waterfall li { margin: 0 10px 10px 0; padding: 0 0 3px; text-align: left; border-width: 1px 0 0; border-top: 1px solid #EAEAEA; background: url
   
4. 
   
5. (../../images/ico//bg_waterfall.png) no-repeat 100% 100%; }
   
6. .waterfall .c, .waterfall h3 { padding: 10px; border: solid #EAEAEA; border-width: 0 1px; background-color: #F8F8F8; }
   
7. .waterfall .c { overflow: hidden; padding-bottom: 0; max-height: 800px; }
   
8. .waterfall .c .nopic { display: block; background:{WRAPBG} url({IMGDIR}/nophototiny.png) no-repeat 50% 50%; cursor: pointer; }
   
9. .waterfall .auth { padding: 0 10px 10px; border-width: 0 1px 1px; border-style: solid; border-color: transparent #EAEAEA #B9B9B9; background: #F8F8F8; }
   
10. .waterfall .auth img { display: inline-block; margin: 0 1px; }
    
11. /* 大分页按钮 */
    
12. .pgbtn { margin: 5px 0 10px; }
    
13. .pgbtn a { display: block; height: 40px; line-height: 40px; letter-spacing: 5px; text-align: center; border: 1px solid #DCDCDC; background: #F5F5F5 url
    
14. 
    
15. (../../images/ico/bg_pgbtn.png) repeat-x 0 0; font-size: 14px; outline: none; border-radius: 5px; box-shadow: 0 1px 0 #F5F5F5; }
    
16. .pgbtn a:hover { border-color: #BABABA; text-decoration: none; }
    
17. .pgbtn a:active { background: #EEE; border-color: #D0D0D0; box-shadow: none; }

复制代码

2、 static文件夹默认直接上传即可，修改上传位置的，可自行修改文件里的JS代码路径即可

3、forumdisplay_list.htm 文件传到你的当前风格模版里即可（切记：你当前的模版风格不包含此文件的（附件里的forumdisplay_list.htm为官方默认文件），若有包含了此文件请自行对比修改）
通过以上操作后，再到后台去更新下缓存和做下如下操作即可：
进入需要瀑布流的版块开启他的图片模式，然后再进行  后台 界面-界面设置-主题列表页 把主题封面宽度设置为200  主题封面高度 设置为9999 ，更新缓存

通过以上操作还有问题的可跟帖提出，将做一一解答，这里也感谢论坛的前辈发布的部分版本为我省去了不少的研究时间哈{:soso_e182:}

最后pS: 要上传的文件代码保证百分百的干净，不带任何其他站点信息，可放心上传使用，最后广告下朋友的一网站 厦门蜜月岛网

占楼，更新了个错误

辛苦了，挺不错啊

辛苦了，挺不错啊

谢谢分享  今晚试试
来自：Discuz! 官方站 Android客户端

站长论坛支持一下。http://www.cncuz.com/

不错的说。。。。

支持一下吧!  还不错!

不错感谢分享
全讯网 http://www.7123.com