ajax+script的瀑布流写法

最新推荐文章于 2021-09-06 18:40:35 发布

谁牵引了你的泪

最新推荐文章于 2021-09-06 18:40:35 发布

阅读量239

点赞数 1

分类专栏： ajax 文章标签： ajax +javascript的瀑布流写法

本文链接：https://blog.csdn.net/king_spunch/article/details/51325558

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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