Emlog非插件实现瀑布流图片墙单页

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

 

LEAVE A REPLY
loading