应需求需要在手机端做一个瀑布流的效果,因为后台系统是 phpcms,所以 google 了一下,找到了这个:http://bbs.phpcms.cn/thread-700844-1-1.html,一个 phpcms 瀑布流插件,下载地址 提取码:a84b
后来需求改变,需要从数据库中动态的拿数据到页面上,就在此插件的基础上修改了一下,不废话直接上代码:
picflow.php 放在 phpcms 根目录下的 api 文件夹中
<?php
defined('IN_PHPCMS') or exit('No permission resources.');
/**
*获取瀑布流图像
*/
// 从数据库中获取当前文档模型的数据
$db = '';
$db = pc_base::load_model('content_model');
$db->table_name = 'ssx_ssxmob_new'; // ssx_ssxmob_new 当前模型名称
if (isset($_GET['page'])){
$page=intval($_GET['page']);
}else{
$page=1;
}
// php 获取当前 url 参数方法
$url = $_SERVER["QUERY_STRING"];
$catid = get($url);
// echo $catid['catid'];
function get($url){
$data = array();
$parameter = explode('&',end(explode('?',$url)));
foreach($parameter as $val){
$tmp = explode('=',$val);
$data[$tmp[0]] = $tmp[1];
}
return $data;
}
// 当只有一张表的时候,直接用 select 方法查询,参考:http://www.cnblogs.com/suihui/archive/2013/08/01/3229821.html
// 获取指定栏目状态为99的数据并赋值给变量
// $data = $db->select('status=99 And catid=' .$catid['catid']. '', '*');
// 如果需要分别从主表和附表中拿数据并对应关系,直接使用 query 执行 sql 查询
// 至于前边为什么要加上这个$db->fetch_array,我也不知道,我是捣鼓好久试出来的,反正数据拿到了,还没有来的及研究为什么
$data = $db->fetch_array($db->query('Select ssx_ssxmob_new.*,ssx_ssxmob_new_data.* FROM ssx_ssxmob_new LEFT JOIN ssx_ssxmob_new_data ON ssx_ssxmob_new.id=ssx_ssxmob_new_data.id WHERE status=99 And catid=' .$catid['catid']. ''));
// 进行 JSON 编码
// $result = json_encode(gbk2utf8($data));
$result = json_encode($data);
// getJSON 跨域
$cb = $_GET['callback'];
$cb = $_GET['callback']; // getJSON('xxx.com?callback=?') 中的callback
echo($cb."(".$result.")");
// 如果数据库是 gbk 的需要转换成 utf-8
function gbk2utf8($data){
if(is_array($data)){
return array_map('gbk2utf8', $data);
}
return iconv('gbk','utf-8',$data);
}
?>
前台 js 代码:
var url = "{APP_PATH}api.php?op=picflow&catid=" + i + "&callback=?";
// 判断 div 是否为空
$("#container").each(function(){
var t = $(this).html();
t = t.replace(/[\r\n]/g,"").replace(/[ ]/g,"");
if(t == ''){
getJson();
}else{
$("#container").empty();
getJson();
}
});
function getJson(){
// getJSON 请求数据并循环输出到 div 中
$.getJSON(url, function(data){
for(var i in data){
var title = decodeURI(data[i].title);
var url = data[i].url;
//var playtime = data[i].playtime;
var html = '<ul class="list"><a href="' + url + '"><li></li><li><p>' + title + '</p></li><li>' + 'playtime' + '</li></a></ul>';
$("#container").append(html);
}
})
}