PHPCMS 点击加载更多瀑布流布局数据调用
06/25
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.90dreamb.com</title>
</head>
<style type="text/css">
#container{wi dth:940px;margin:50px auto;}
#container ul{width:223px;list-style:none;float:left;margin-right:20px;}
#container ul li{
margin-bottom:20px;
-moz-border-bottom-colors:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
background-color:#fff;
/*background-image:linear-gradient(to bottom, #FFFFFF, #E6E6E6);*/
background-repeat:repeat-x;
border-color:#e6e6e6 #e6e6e6 #B3B3B3;
border-image:none;
border-radius:4px 4px 4px 4px;
border:1px solid #ddd;
box-shadow:0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
#container ul li img{width:100%;}
.water_user{color:#666;padding:10px;}
.water_option{backg round:#f5f5f5;border-top:1px #f0f0f0 solid;padding:5px 5px 5px 10px;line-height: 25px;}
.water_option:after{content:"";display:block;clear:both;visibility:hidden;}
.water_option .option_item,.water_option .split{float:right;}
.water_option .option_item{color:#3e88cd;text-decoration:none;margin-right:10px;}
.water_option .option_item:hover{ text-decoration:underline;}
.water_option .split{display:inline-block;margin:5px 10px 0 0;height:12px;width:1px;background-color:#D8D8D8;}
.loadMeinvMOre{height:30px;line-height:30px;color:#999;text-align:center;display:block;clear:both;text-decoration:none;}
</style>
<body>
<div id="container">
{pc:content action="lists" catid="100" num="4" order="id DESC"}
{loop $data $v}
<ul>
<li>
<div><a href="{$v[url]}"><img src="{$v[thumb]}" alt="" /></a></div>
<div><h4><a href="{$v[url]}">{$v[title]}</a></h4></div>
<div>
{$v[description]}
</div>
</li>
</ul>
{/loop}
</div>
<input type="hidden" name="" value="4" id="pages" />
<div>
<p>
<a href="javascript：" id="loadMeinvMOre"><i>...</i><span>加载更多</span><i>...</i></a>
</p>
</div>
<p>尾部php文件放到phpcms 根目录下的api</p>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function() {
//url data function dataType
function loadMeinv(catid) {
var data = 0;
var num='';
var sval=parseInt($('#pages').val());
var nval=sval+6;
$('#pages').val(nval);
$.ajax({
url:'api.php?op=getmore&catid=100&p='+sval,
data:'',
dataType:'json',
success:function(msg){
if (typeof msg == 'object'){
for (var i = 0; i < msg.length; i++) { //每次加载时模拟随机加载图片
var html = "";
html = '<li><div><a href="'+msg[i]['url'] +'"><img src = '
+ msg[i]['thumb'] + '></a></div><div><h4><a href='+msg[i]['url']+'">'
+ msg[i]['title'] + '</a></h4></div><div>'+msg[i]['description']+'</div></li>';
$minUl = getMinUl();
$minUl.append(html);
}
}
}
})
}
function getMinUl() {//每次获取最短的ul,将图片放到其后
var $arrUl = $("#container .col");
var $minUl = $arrUl.eq(0);
$arrUl.each(function(index, elem) {
if ($(elem).height() < $minUl.height()) {
$minUl = $(elem);
}
});
return $minUl;
}
//点击更多加载
$("#loadMeinvMOre").click(function() {
$minUl = getMinUl();
loadMeinv();
});
})
</script>
</body>
</html>
<?php
defined('IN_PHPCMS') or exit('No permission resources.');
$db = pc_base::load_config('database','default');
$hostname = $db[hostname];
$db_user = $db[username];
$db_pass = $db[password];
$db_name = $db[database];
$timezone="Asia/Shanghai";
$link=mysql_connect($hostname,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");
header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
$catid=$_GET['catid'];
$start=$_GET['p'];
$num=6;
$sql="select * from sj_news where catid={$catid} order by id desc limit {$start},{$num}";
$resources=mysql_query($sql);
while ( $row=mysql_fetch_assoc($resources)) {
$rows[]=$row;
}
echo json_encode($rows);
?>
版权属于：
Dcr163的博客
本文链接：
https://dcr163.cn/385.html（转载时请注明本文出处及文章链接）
