梦想之家

PHPCMS 点击加载更多瀑布流布局数据调用

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



 ?>



您此刻的心情: