瀑布流详解

来源：互联网发布：qq炫舞合魔法软件编辑：程序博客网时间：2024/06/05 01:08

瀑布流布局原理：将多个ul通过浮动并排显示，首先为它们依次添加第一行元素后，我们获取每一列ul的高度，然后在高度最小的那一列元素下继续排列下面的元素。以下为相应代码以及注释。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{margin:0;padding: 0;}
           li{list-style: none;}
           #box{margin:0 auto;width:700px;}
           ul{width: 200px;float:left;margin:0 auto;margin-right: 10px;}
           img{width:200px;padding-top: 10px;}
       </style>
       <script>
           window.onload = function(){
               var oUl = document.getElementsByTagName('ul');

               //最小高度
               function min_height(){
                   var index = 0;
                   var minUl = oUl[0].offsetHeight;   //先把第一个ul的值赋给minUl(高度最小的ul)
                   for(var i = 0; i < oUl.length; i ++){//遍历ul的长度，获取高度最小的ul，并获取其下标
                       if(oUl[i].offsetHeight < minUl){
                           minUl = oUl[i].offsetHeight;
                           index = i;
                       }
                   }
                   return index;                       //将下标返回出去
               }

               jiazai();
               //加载图片
               function jiazai(){
                   for(var i = 1; i < 15; i ++){                   //遍历图片
                       var oLi = document.createElement('li');       //自动创建li
                       var oImg = document.createElement('img');   //自动创建img
                       oImg.src = "images/" + i + ".jpg";           //给img添加src属性
                       oLi.appendChild(oImg);                       //将img添加到li里
                       oUl[min_height()].appendChild(oLi);           //将li添加到ul里
                   }
               }
               //滚动
               document.onscroll = function(){
                   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//处理兼容
                   var clientH = document.documentElement.clientHeight;       //浏览器的可视高度
                   //document.body.scrollHeight:页面元素的滚动高度（页面内容的实际高度）
                   if(scrollTop + clientH >= document.body.scrollHeight * 0.8){
                       jiazai();
                   }
               };


           };
       </script>
   </head>
   <body>
       <div id="box">
           <ul></ul>
           <ul></ul>
           <ul></ul>
       </div>
   </body>
</html>

0 0