自定义ajax实现瀑布流

清疚 2021-07-24 22:50 377阅读 0赞

前台:

<!DOCTYPE html>
    <html>
    <head >
    	<meta charset='utf-8'/>
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="css/initial.css">
    	<style>
    		.out{   position: relative; margin: 0 auto;  }
    		.in{   float: left;  }
    		img{ 
    			margin: 10px;
    			padding: 10px;
    			border: 1px solid lightgray;
    			border-radius: 15px;
    			box-shadow: 0px 0px 5px orange;
    		}
    	</style>
    </head>
    <body>
    <div class="out"></div>
    <script src="myajax.js"></script>
    <script>
    	window.onload = function (){ 
    		//等到页面彻底加载完毕后，在发送ajax请求
    		window.myajax({ 
    			type:'get',
    			url:'6.php',
    			success:function (res){ 
    				var dataArr = res.info;
    				//当数据请求完毕后，开始处理页面
    				var outDiv = document.querySelector('.out');
    				for(var i=0; i<dataArr.length; i++){ 
    					var div = document.createElement('div');
    					div.className = 'in';
    					div.innerHTML = '<img src="'+dataArr[i]+'">';
    					outDiv.appendChild(div);
    				}
    				//准备构建瀑布流的必要信息
    				var inDivs = document.querySelectorAll('.in');
    				var num = Math.floor(document.documentElement.clientWidth/inDivs[0].offsetWidth);
    				outDiv.style.width = num*inDivs[0].offsetWidth+'px';
    				var heightArr = [];
    				//构建瀑布流
    				for(var i=0; i<inDivs.length; i++){ 
    					if(i<num){ 
    						heightArr.push(inDivs[i].offsetHeight);
    					}else{ 
    						inDivs[i].style.position = 'absolute';
    						minHeight = Math.min.apply(null, heightArr);
    						minIndex = heightArr.indexOf(minHeight);
    						inDivs[i].style.top = minHeight+'px';
    						inDivs[i].style.left = inDivs[minIndex].offsetLeft+'px';
    						heightArr[minIndex] += inDivs[i].offsetHeight;
    					}
    				}
    			}
    		});
    	};
    </script>
    </body>
    </html>

后台:

<?php
     
      	$dataArr = ['img/i1.jpg','img/i2.jpg','img/i3.jpg','img/i4.jpg','img/i5.jpg','img/i6.jpg','img/i7.jpg','img/i8.jpg','img/i9.jpg','img/i10.jpg','img/i11.jpg','img/i12.jpg','img/i13.jpg','img/i14.jpg','img/i15.jpg'];
    
      	$success=array("mes"=>'ok','info'=>$dataArr);
      	echo json_encode($success);
    ?>