<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流写法</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#wrap {
width: 770px;
margin: 0 auto;
}
#list li {
width: 250px;
float: left;
margin-right: 10px;
}
#list li .cont{
width:248px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#list li .cont img{
width:248px;
display: block;
}
#list li .cont p{
width:228px;
padding: 10px;
font-size: 14px;
font-family: "微软雅黑";
}
#btn{
display: block;
width: 150px;
height: 40px;
font-size: 14px;
font-family: "微软雅黑";
text-align: center;
line-height: 40px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<li></li>
<li></li>
<li style="margin-right: 0;"></li>
</ul>
<div style="clear: both;"></div>
</div>
<input type="button" id="btn" value="点击显示更多......" />
<script type="text/javascript">
var oList=document.getElementById('list');
var oLi=document.getElementsByTagName('li');
var oBtn=document.getElementById('btn');
var num=0;
more();//在点击事件之前调用函数,使图片在点击之前显示数目为8张
oBtn.οnclick=function(){
num+=8;//点击事件num的初始值为8;
more();
}
function more(){//不传递参数num,目的是使函数内的num接收全局变量num=0
ajax( {
'method':'get',
'url':'pbl.php',
'asyn':true,
'success':function(res){
var res=eval(res);//拿到可用的数据
var str='';
for(var i=num;i<num+8;i++){//i<num+8使点击事件调用函数时从第九张照片开始
str='<div class="cont"><img width="'+res[i].width+'" height="'+res[i].height+'" src="'+res[i].img+'" /><p>'+res[i].title+'</p></div>';
oLi[getMinH()].innerHTML+=str;
}
}
} );
}
//ajax的实参为json,所以对应的形参为json
function getMinH(){
var index=0;
var iH=oLi[index].offsetHeight;
for(var i=0;i<oLi.length;i++){
if(iH>oLi[i].offsetHeight){
index=i;
iH=oLi[i].offsetHeight;
}
}
return index;
}
//传递参数时应该特别注意:当实参为json时,形参也一定要以json传递,否则会报错
/*ajax('get','pbl.php',true,function(res){
alert(res);
})*/
function ajax( mJson ){
var method=mJson.method || 'get';
var url = mJson.url;
var asyn = mJson.asyn || true;
var success = mJson.success;
var xhr=window.XMLHttpRequest?( new XMLHttpRequest() ):( new ActiveXObject('Microsoft.XMLHttp') );
xhr.open(method,url,asyn);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status<300&&xhr.status>=200){
success&&success(xhr.responseText);
}else{
alert('出错了'+xhr.status);
}
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流写法</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
#wrap {
width: 770px;
margin: 0 auto;
}
#list li {
width: 250px;
float: left;
margin-right: 10px;
}
#list li .cont{
width:248px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
#list li .cont img{
width:248px;
display: block;
}
#list li .cont p{
width:228px;
padding: 10px;
font-size: 14px;
font-family: "微软雅黑";
}
#btn{
display: block;
width: 150px;
height: 40px;
font-size: 14px;
font-family: "微软雅黑";
text-align: center;
line-height: 40px;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<li></li>
<li></li>
<li style="margin-right: 0;"></li>
</ul>
<div style="clear: both;"></div>
</div>
<input type="button" id="btn" value="点击显示更多......" />
<script type="text/javascript">
var oList=document.getElementById('list');
var oLi=document.getElementsByTagName('li');
var oBtn=document.getElementById('btn');
var num=0;
more();//在点击事件之前调用函数,使图片在点击之前显示数目为8张
oBtn.οnclick=function(){
num+=8;//点击事件num的初始值为8;
more();
}
function more(){//不传递参数num,目的是使函数内的num接收全局变量num=0
ajax( {
'method':'get',
'url':'pbl.php',
'asyn':true,
'success':function(res){
var res=eval(res);//拿到可用的数据
var str='';
for(var i=num;i<num+8;i++){//i<num+8使点击事件调用函数时从第九张照片开始
str='<div class="cont"><img width="'+res[i].width+'" height="'+res[i].height+'" src="'+res[i].img+'" /><p>'+res[i].title+'</p></div>';
oLi[getMinH()].innerHTML+=str;
}
}
} );
}
//ajax的实参为json,所以对应的形参为json
function getMinH(){
var index=0;
var iH=oLi[index].offsetHeight;
for(var i=0;i<oLi.length;i++){
if(iH>oLi[i].offsetHeight){
index=i;
iH=oLi[i].offsetHeight;
}
}
return index;
}
//传递参数时应该特别注意:当实参为json时,形参也一定要以json传递,否则会报错
/*ajax('get','pbl.php',true,function(res){
alert(res);
})*/
function ajax( mJson ){
var method=mJson.method || 'get';
var url = mJson.url;
var asyn = mJson.asyn || true;
var success = mJson.success;
var xhr=window.XMLHttpRequest?( new XMLHttpRequest() ):( new ActiveXObject('Microsoft.XMLHttp') );
xhr.open(method,url,asyn);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status<300&&xhr.status>=200){
success&&success(xhr.responseText);
}else{
alert('出错了'+xhr.status);
}
}
}
}
</script>
</body>
</html>