一直以来，瀑布流网站深受大家的喜爱。于是我也自制了一个非插件瀑布流图片墙的单页。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>’."
";}
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后台吧
