water liu图片成效 _Web前端

water liu图片效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	#water{
		width:960px;
		margin:0 auto;
		}
	#water li{
		float:left;
		list-style:none;
		}
		#water li div{
			padding:10px;}
</style>
<script type="text/javascript">
var pic_width=220;
	window.onload=function(){
		loadPic();
		}
	function loadPic(){
		init();
		var ajax=getAjax();
		var pic_num=10;
		var from=0;
		ajax.open('GET','data.php?form='+from+'&num='+pic_num,true);
		ajax.send();
		ajax.onreadystatechage=function(){
			if(ajax.readyState==4 && ajax.status==200){
				//alert(ajax.responseText);
				
				process(ajax.responseText);
				}
			}
		}
		window.onresize=function(){
			init();
			loadPic();
			}
		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;//改变一下
				loadPic();
				}
			}
		function init(){
			var width=document.body.offsetWidth;
			var bro_colum=Math.floor(width/(pic_width+20));
			
			var oul=document.createElement('ul');
			oul.setAttribute('id','water');//给他一个属性
			
			for(var i=0;i<bro_colum;i++){
					var oli=document.createElement('li');
					oul.appendChild(oli);//创建一个孩子
				}
				document.body.appendChild(oul);
			}
function getAjax(){
 if(window.XMLHttpRequset){
  xmlHttp = new XMLHttpRequest();
 }else if(window.ActiveXObject){
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
}

	function process(jsonText){
		var obj=eval('('+jsonText+')');//一个对像
		//获取 ul中的dom对像，找出最小的来。
		var oul=document.getElementById("water");
		
		for(var i=0;i<obj.length;i++){
			var oProduct=obj[i];
			iHeight=-1;
				for(var z=0;z<oul.childNodes.length;z++){//子结点
						var iTempHeight=oul.childNodes[z].offsetHeight;
						if(iHeight==-1 || iHeight>iTempHeight){
							iHeight=iTempHeight;
							var oli=oul.childNodes[z];
							}
					}
					odiv=document.createElement('div');
					odiv.innerHTML='<img src="./image/'+oProduct.image+'" /><br />'+oProduct.title;
			oli.appendChild(odiv);
			}
			
	}
</script>
</head>

<body>
<?php
	$arr=array();
    $h=opendir('./image');
    	while($file=readdir($h)){
        	if($file =='.' || $file=='..'){
            	continue;//跳过本次while，进入下一次
            }
            $arr[]=$file;
        }
    closedir($h);
    
  
?>
	<ul id="water">
    	<li>
        <?php
        	for($i=1;$i<count($arr);$i++){
            	echo '<div><img src="image/'.$arr[$i].'"></div>';
            }
        ?>
        </li>
    	<li>
        <?php
        	for($i=2;$i<count($arr);$i++){
            	echo '<div><img src="image/'.$arr[$i].'"></div>';
            }
        ?>
        </li>
     	<li>
        <?php
        	for($i=3;$i<count($arr);$i++){
            	echo '<div><img src="image/'.$arr[$i].'"></div>';
            }
        ?>
        </li>
     	<li>
        <?php
        	for($i=4;$i<count($arr);$i++){
            	echo '<div><img src="image/'.$arr[$i].'"></div>';
            }
        ?>
        </li>         	
    </ul>
	
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<?php
	echo 11;
	$sql='select * from water limit {$_GET["from"]},{$_GET["num"]}';
	$arr=array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg');
	
	$str=json_encode($arr);
	echo $str;
?>
</body>
</html>