一直以来，瀑布流网站深受大家的喜爱。于是我也自制了一个非插件瀑布流图片墙的单页。Pinterest是最早使用瀑布流的鼻祖，如今瀑布流逐渐在国内流行开来,实现方式也各有不同。无论淘宝、百度、新浪等老牌，还是新生的美丽说和蘑菇街，都加入了这个行列。

   方法非常简单，一般都是调用jQuery实现。

1、获取博客内的图片，请将get_pic函数放在module.php中。

<?php
//Custom：图片墙
function get_pic(){
$box='';
$box .='';
$db = MySql::getInstance();
$sql = "SELECT blogid as g,filepath,(SELECT title FROM ".DB_PREFIX."blog where `gid`=g) as t FROM ".DB_PREFIX."attachment WHERE `filepath` LIKE '%jpg' OR `filepath` LIKE '%gif' OR `filepath` LIKE '%png' GROUP BY `blogid` ORDER BY `addtime` DESC LIMIT 1, 20";
$imgs = $db->query($sql);
while($row = $db->fetch_array($imgs)){
$box .='<div class="pici"><a title="'.$row['t'].'" href="'.Url::log($row['g']).'"><img alt="'.$row['t'].'" src="'.BLOG_URL.substr($row['filepath'],3,strlen($row['filepath'])).'" width="251" /></a></div>'."\n";}
echo $box;
}?>

2、制作图片墙单页模板

新建page模板，复制page.php，改名为waterfall.php（待会儿需要调用），在输出文字内容的后面调用get_pic函数。

在

<?php echo $log_content;?>

后面添加：

<div id="pic-wall"><?php get_pic(); ?></div>

如不需要侧边栏可以删除：

<?php include View::getView('side');

3、调用瀑布流的jquery代码，放在waterfall.php底部。

特别注意：如果你的模板没有jquery-1.7.1.js，需要自行添加该插件，而且要添加在下列代码之前。没有该插件waterfall插件无法执行。

<script type="text/javascript" src="<?php echo TEMPLATE_URL; ?>js/waterfall.js" ></script><script type="text/javascript">var wf = Waterfall( "#pic-wall ", ".pici", 270 );</script>

4、添加css样式，放在waterfall底部

<style>/*图片墙*/#pic-wall {margin:20px auto; width: 100%;position: relative}#pic-wall .pici{margin-left: 5px; margin-bottom: 10px;background: #FFF;display:inline-block;width:250px;border: 2px solid #FFF;}</style>

5、新建图片墙页面、调用waterfall.php。如果这也不会，你就好好研究emlog 3.0后台吧

下面提供waterfall源码下载，带有实例，可供参考。

附件分享：https://yunpan.cn/cSWgcELWhjkVK  访问密码 7398