1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>瀑布流的三种实现方式</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 img{ 12 display:block; 13 width: 100%; 14 } 15 #main{ 16 position: relative; 17 } 18 .box{ 19 padding:15px 0 0 15px; 20 float:left; 21 } 22 .pic{ 23 width:165px; 24 padding:10px; 25 border:1px solid #ccc; 26 border-radius:5px ; 27 box-shadow:0 0 5px #ccc; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="main"> 33 <!-- <div class="box"> 34 <div class="img"><img src="" alt=""></div> 35 </div> --> 36 </div> 37 38 <!-- script --> 39 <script type="text/javascript"> 40 var xmlhttp; 41 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 42 xmlhttp=new XMLHttpRequest(); 43 } 44 else{// code for IE6, IE5 45 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 46 } 47 xmlhttp.onreadystatechange=function(){ 48 if (xmlhttp.readyState==4 && xmlhttp.status==200){ 49 var data=xmlhttp.responseText; 50 console.log(typeof data); 51 var lists=eval(data); 52 //动态添加数据 53 var main=document.getElementById('main'); 54 for(var i=0;i<lists.length;i++){ 55 var box=document.createElement('div'); 56 box.setAttribute('class','box'); 57 var pic=document.createElement('div'); 58 pic.setAttribute('class','pic'); 59 var img=document.createElement('img'); 60 img.setAttribute('src',lists[i].src); 61 pic.appendChild(img); 62 box.appendChild(pic); 63 main.appendChild(box); 64 } 65 waterfall('main','box'); 66 } 67 }; 68 xmlhttp.open('GET','img.json'); 69 xmlhttp.send(); 70 function waterfall(parent,box){ 71 //将main下class为box的所有元素取出来 72 var oParent=document.getElementById(parent); 73 var oBoxs=getByClass(oParent,box); 74 //获取图片的显示列数 75 var oBoxWidth=oBoxs[0].offsetWidth; 76 var cols=Math.floor(document.documentElement.clientWidth/oBoxWidth); 77 //设置main的宽度与样式 78 oParent.style.cssText=""+oBoxWidth*cols+"px;margin:0 auto;"; 79 var hArr=[];//存放每一列的高度 80 for(var i in oBoxs){ 81 if(i<cols){ 82 hArr.push(oBoxs[i].offsetHeight); 83 }else{ 84 var minHeight=Math.min.apply(null,hArr);//利用apply来改变this的指向来求最小值 85 var index=getMinHeightIndex(hArr,minHeight); 86 //给第一行外的所有元素家绝对定位 87 oBoxs[i].style.position="absolute"; 88 oBoxs[i].style.top=minHeight+"px"; 89 oBoxs[i].style.left=oBoxs[index].offsetLeft+"px"; 90 //更新每一列的高度数据 91 hArr[index]+=oBoxs[i].offsetHeight; 92 } 93 } 94 } 95 function getByClass(parent,className){ 96 var objElementsArr=[]; 97 oElements=parent.getElementsByTagName('*');//获取parent下的所有元素 98 for(var i in oElements){ 99 if(oElements[i].className==className){ 100 objElementsArr.push(oElements[i]); 101 } 102 } 103 return objElementsArr; 104 } 105 function getMinHeightIndex(arr,val){ 106 for(var i in arr){ 107 if(arr[i]==val){ 108 return i; 109 } 110 } 111 } 112 </script> 113 </body> 114 </html>
瀑布流
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。