导航

js-瀑布流

Posted on 2018-04-22 14:48  小飞博客  阅读(120)  评论(0)  编辑  收藏  举报 
 1 <!DOCTYPE html>  
 2 <html>  
 3 <head>  
 4 <meta charset="utf-8" />  
 5 <title>简易瀑布流</title>  
 6 <style type="text/css">  
 7     *{margin: 0;padding: 0;list-style: none;}  
 8     #list{width: 1110px;margin: 0 auto;}  
 9     #list li{width: 212px;float: left;padding: 5px;}  
10     .div{border: 1px solid #333;padding: 5px;margin-bottom: 10px;}  
11     .img{width: 200px;display: block;}  
12 </style>  
13   
14 <script type="text/javascript">  
15 window.onload=function (){  
16 
17 /*实现：5个li分成5列，通过判断当前哪一个li高度最小，然后把div插入到那个li里面*/  
18 
19     var oList=document.getElementById('list');  
20     var aLi=oList.getElementsByTagName('li');  
21     var flag=true;  
22     var json={  
23         'data':[  
24             {'src':'img/1.jpg'},{'src':'img/2.jpg'},{'src':'img/3.jpg'},  
25             {'src':'img/4.jpg'},{'src':'img/5.jpg'},{'src':'img/6.jpg'},  
26             {'src':'img/7.jpg'},{'src':'img/8.jpg'},{'src':'img/9.jpg'},  
27             {'src':'img/10.jpg'},{'src':'img/11.jpg'},{'src':'img/12.jpg'}  
28         ],  
29         'imgH':[  
30             {'height':'232px'},{'height':'264px'},{'height':'300px'},  
31             {'height':'289px'},{'height':'267px'},{'height':'278px'},  
32             {'height':'300px'},{'height':'234px'},{'height':'271px'},  
33             {'height':'251px'},{'height':'363px'},{'height':'333px'}  
34         ]  
35     }  
36     getLoad();  
37     function getLoad(){  
38             for (var i=0;i<json.data.length;i++) {  
39                 var min=myMin();  
40                 var oDiv=document.createElement('div');  
41                 oDiv.className='div';  
42                 var oImg=document.createElement('img');  
43                 oImg.className='img';  
44                 oImg.src=json.data[i].src;  
45                 /*这里必须要设置高度，测试中发现js会把每一个节点、属性  
46                 创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/  
47                 oImg.style.height=json.imgH[i].height;  
48                 oDiv.appendChild(oImg);  
49                 //高度最小的li插入div  
50                 aLi[min].appendChild(oDiv);  
51             }  
52             flag=true;  
53     }  
54     //获取到当前li高度最小的索引  
55     function myMin(){  
56         var index=0;  
57         var min=aLi[index].offsetHeight;  
58         for (var i=1;i<aLi.length;i++) {  
59             if(aLi[i].offsetHeight<min){  
60                 index=i;  
61                 min=aLi[index].offsetHeight;  
62             }  
63         }  
64         return index;  
65     }  
66     window.onscroll=function (){  
67         var scroT=document.documentElement.scrollTop||document.body.scrollTop;  
68         var clieH=document.documentElement.clientHeight||document.body.clientHeight;  
69         var minN=myMin();  
70         //这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了  
71         if((aLi[minN].offsetTop+aLi[minN].offsetHeight)<(scroT+clieH)){  
72             if(flag){  
73                 flag=false;  
74                 getLoad();  
75             }  
76         }  
77     };  
78 };  
79 </script>  
80 </head>  
81 <body>  
82     <ul id="list">  
83         <li></li>  
84         <li></li>  
85         <li></li>  
86         <li></li>  
87         <li></li>  
88     </ul>  
89 </body>  
90 </html>