05/17 发表评论

应需求需要在手机端做一个瀑布流的效果,因为后台系统是 phpcms,所以 google 了一下,找到了这个:http://bbs.phpcms.cn/thread-700844-1-1.html,一个 phpcms 瀑布流插件,下载地址 访问密码:cddb

后来需求改变,需要从数据库中动态的拿数据到页面上,就在此插件的基础上修改了一下,不废话直接上代码:

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);
        }
    })
}

发表评论

回到顶端