随着瀑布流的出现，现在这种技术风靡到各大电商网站，感觉是可能用户的体验度的比较高不？？？ 今天我就给大家代码，今天有点事太麻烦，所以等过两天我再给大家讲一下原理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Show</title>
<style>
#water {
/*width:960px;*/
/*margin:0 auto;*/
}
#water li{
list-style:none;
float:left;
}
#water li div{
padding:10px;
}
</style>
<script>
var pic_width=220; //每张图片的宽度
var pic_num=10; //每次显示10张图片
var from=0; //数据库中从第几张开始显示，第一张开始是0
/* 页面加载完初始化，获取图片 */
window.onload=function(){
init(); //初始化动态生成列数
loadPic(); //获取图片
}
/* 当浏览器宽度发生变化时，重新初始化 */
window.onresize=function(){
init();
loadPic();
}
/* 当滚动条移动到距底部还有200距离的时候加载新的图片 */
window.onscroll=function(){
var sHeight=document.documentElement.scrollTop||document.body.scrollTop;//滚动的高度
var wHeight=document.documentElement.clientHeight; //窗口高度
var dHeight=document.documentElement.offsetHeight;//文档高度
if(dHeight-wHeight-sHeight<200){
from=from+pic_num; //从数据库中获取后面的图片信息，要更改from值，该值会通过ajax传入到服务器端
loadPic();
}
}
/* 初始化，动态计算页面宽度，算出列数 */
function init(){
var oul=document.createElement('ul'); //生成ul对象
var width=document.body.offsetWidth; //获取浏览器宽度
var bro_colum=Math.floor(width/(pic_width+20)); //计算列数
oul.setAttribute('id','water'); //给予id为water
for(var i=0;i<bro_colum;i++){ //循环创建li对象
var oli=document.createElement('li');
oul.appendChild(oli);
}
document.body.appendChild(oul);
}
/* 获取图片 */
function loadPic(){
var ajax=getAjax(); //获取ajax对象
ajax.open('GET','data.php?from='+from+'&num='+pic_num,true);
ajax.send();
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
process(ajax.responseText); //获取服务器端传回的json字符串，调用一个方法进行处理
}
}
}
/* 处理json字符串，将图片插入到页面中 */
function process(jsonText){
var obj=eval('('+jsonText+')'); //生成对象列表
var oul=document.getElementById('water'); //获取id为water的ul对象
for(var i=0;i<obj.length;i++){ //利用遍历对每张图片进行处理
var oProduct=obj[i]; //获取图片对象
/* 利用算法遍历ul下面的所有li高度，找到高度最短的一个li，向里面插入图片 */
iHeight=-1;
for(var j=0;j<oul.childNodes.length;j++){
iTempHeight=oul.childNodes[j].offsetHeight;
if(iHeight==-1 || iHeight>iTempHeight){
iHeight=iTempHeight;
var oli=oul.childNodes[j];
}
}
odiv=document.createElement('div');
odiv.innerHTML='<img src="./uploads/'+oProduct.image+'"/><br/>'+oProduct.title;
oli.appendChild(odiv);
}
}
function getAjax(){
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
</head>
<body>
</body>
</html>
<?php
/*
* 数据库中的数据为
* id image title
* 1 1.jpg something
* 2 2.jpg something
* ...
* 总共有20个图片 1.jpg - 20.jpg 对应uploads文件夹中的图片名
*
*/
$arr=array();
mysql_connect('localhost','root','root');
mysql_select_db('water');
$sql="select image,title from pic limit {$_GET['from']},{$_GET['num']}";
$result=mysql_query($sql);
if($result && mysql_num_rows($result)>0){
while($data=mysql_fetch_assoc($result)){
$arr[]=$data;
}
}
$str=json_encode($arr);
echo $str;
?>
嗯 这些就两个一个，就是下边这个我们从数据库中取出数据，然后用json 的方式，传给前台，整个流程是ajax的异步传输
嗯 今天就先说道这里，嗯时间不是那么充足，谢谢大家的支持，欢迎转载，转载请注明来自微度网络-网络技术中心http://yun.widuu.com
发表评论 取消回复