PHP+AJAX实现调用数据瀑布流显示方式

PHP+AJAX实现调用数据瀑布流显示方式 这个瀑布流现在非常流行 在商城和分享平台和博客经常看到 就是当你继续往下浏览商品 当滚动条里底部达到指定设置的高度时候就执行ajax调用数据进行异步加载 符合用户体验也增加网页速度
下面是具体PHP+AJAX实现调用数据瀑布流显示方式实例代码有三个文件 修改下自己的数据库密码 进行测试吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流-Derek</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="waterfall.css" />
<script type="text/javascript" language="javascript" src="waterfall.js"></script>
</head>
<body>

<ul id="stage">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</body>
</html>

Javascript文件:waterfall.js

$(function(){
jsonajax();
});

//这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据
$(window).scroll(function(){
//此方法是在滚动条滚动时发生的函数
// 当滚动到最底部以上100像素时,加载新内容
var $doc_height,$s_top,$now_height;
$doc_height = $(document).height();        //这里是document的整个高度
$s_top = $(this).scrollTop();            //当前滚动条离最顶上多少高度
$now_height = $(this).height();            //这里的this 也是就是window对象
if(($doc_height - $s_top - $now_height) < 100) jsonajax();
});

//做一个ajax方法来请求data.php不断的获取数据
var $num = 0;
function jsonajax(){

$.ajax({
url:'data.php',
type:'POST',
data:"num="+$num++,
dataType:'json',
success:function(json){
if(typeof json == 'object'){
var neirou,$row,iheight,temp_h;
for(var i=0,l=json.length;i<l;i++){
neirou = json[i];    //当前层数据
//找了高度最少的列做添加新内容
iheight  =  -1;
$("#stage li").each(function(){
//得到当前li的高度
temp_h = Number($(this).height());
if(iheight == -1 || iheight >temp_h){
iheight = temp_h;
$row = $(this); //此时$row是li对象了
}
});
$item = $('<div><img src="'+neirou.img+'" border="0" ><br/>'+neirou.title+'</div>').hide();
$row.append($item);
$item.fadeIn();
}
}
}
});
}

CSS文件:waterfall.css

body{text-align:center;}
/*Download by http://www.codefans.net*/
#stage{ margin:0 auto; padding:0; width:880px; }
#stage li{ margin:0; padding:0; list-style:none;float:left; width:220px;}
#stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; } 

php文件:data.php

<?php
$link = mysql_connect("localhost","root","");
$sql = "use waterfall";
mysql_query($sql,$link);
$sql = "set names utf8";
mysql_query($sql,$link);
$num = $_POST['num'] *10;
if($_POST['num'] != 0) $num +1;
$sql = "select img,title from content limit ".$num.",10";
$result = mysql_query($sql,$link);
$temp_arr = array();
while($row = mysql_fetch_assoc($result)){
$temp_arr[] = $row;
}
$json_arr = array();
foreach($temp_arr as $k=>$v){
$json_arr[]  = (object)$v;
}
//print_r($json_arr);
echo json_encode( $json_arr );

关于PHP+AJAX实现调用数据瀑布流显示方式 原理就是这样 主要是根据滚动条高度

参与评论

游客评论不支持回复他人评论内容,如需回复他人评论内容请