瀑布流

  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而更新页面。