zoukankan      html  css  js  c++  java

  • 瀑布流布局--原生JavaScript

    HTML(注意包裹关系,方便js调用)

      1 <body>
  2     <div id="main">
  3         <div class="box">
  4             <div class="pic">
  5                 <img src="images/0.jpg" alt="">
  6             </div>
  7         </div>
  8         <div class="box">
  9             <div class="pic">
 10                 <img src="images/1.jpg" alt="">
 11             </div>
 12         </div>
 13         <div class="box">
 14             <div class="pic">
 15                 <img src="images/2.jpg" alt="">
 16             </div>
 17         </div>
 18         <div class="box">
 19             <div class="pic">
 20                 <img src="images/3.jpg" alt="">
 21             </div>
 22         </div>
 23         <div class="box">
 24             <div class="pic">
 25                 <img src="images/4.jpg" alt="">
 26             </div>
 27         </div>
 28         <div class="box">
 29             <div class="pic">
 30                 <img src="images/2.jpg" alt="">
 31             </div>
 32         </div>
 33         <div class="box">
 34             <div class="pic">
 35                 <img src="images/3.jpg" alt="">
 36             </div>
 37         </div>
 38         <div class="box">
 39             <div class="pic">
 40                 <img src="images/4.jpg" alt="">
 41             </div>
 42         </div>
 43         <div class="box">
 44             <div class="pic">
 45                 <img src="images/5.jpg" alt="">
 46             </div>
 47         </div>
 48         <div class="box">
 49             <div class="pic">
 50                 <img src="images/6.jpg" alt="">
 51             </div>
 52         </div>
 53         <div class="box">
 54             <div class="pic">
 55                 <img src="images/7.jpg" alt="">
 56             </div>
 57         </div>
 58         <div class="box">
 59             <div class="pic">
 60                 <img src="images/3.jpg" alt="">
 61             </div>
 62         </div>
 63         <div class="box">
 64             <div class="pic">
 65                 <img src="images/4.jpg" alt="">
 66             </div>
 67         </div>
 68         <div class="box">
 69             <div class="pic">
 70                 <img src="images/5.jpg" alt="">
 71             </div>
 72         </div>
 73         <div class="box">
 74             <div class="pic">
 75                 <img src="images/3.jpg" alt="">
 76             </div>
 77         </div>
 78         <div class="box">
 79             <div class="pic">
 80                 <img src="images/4.jpg" alt="">
 81             </div>
 82         </div>
 83         <div class="box">
 84             <div class="pic">
 85                 <img src="images/5.jpg" alt="">
 86             </div>
 87         </div>
 88         <div class="box">
 89             <div class="pic">
 90                 <img src="images/6.jpg" alt="">
 91             </div>
 92         </div>
 93         <div class="box">
 94             <div class="pic">
 95                 <img src="images/7.jpg" alt="">
 96             </div>
 97         </div>
 98         <div class="box">
 99             <div class="pic">
100                 <img src="images/3.jpg" alt="">
101             </div>
102         </div>
103         
138     </div>
139 </body>

    LESS(less预编译)

     1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 #main {
 6     position: relative;
 7 
 8 }
 9 .box {
10     padding:15px 0 0 15px;
11     float:left;
12 }
13 .pic {
14     padding: 10px;
15     border: 1px solid #ccc;
16     border-radius: 5px;
17     box-shadow: 0px 0px 5px #ccc;
18     img {
19         width:165px;
20         height:auto;
21     }
22 }

    JavaScript(自己理解的注解)

    (函数存在一定瑕疵,仅用于学习理解)

      1 window.onload = function () {
  2     waterfall("main","box");
  3     //调用自定义函数;作用于main下的每一个box元素;
  4 
  5     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
  6     //模拟json数据;
  7     window.onscroll = function () {
  8         if (checkScrollSlide) {
  9         //调用自定义函数;根据函数返回值确定滚动是否超出范围;
 10             var oParent = document.getElementById("main");
 11 
 12             for (var i = 0; i < dataInt.data.length; i++) {
 13                 var oBox = document.createElement("div");
 14                 oBox.className = "box";
 15                 oParent.appendChild(oBox);
 16                 //创建box块
 17 
 18                 var oPic = document.createElement("div");
 19                 oPic.className = "pic"; 
 20                 oBox.appendChild(oPic);
 21                 //创建pic块
 22 
 23                 var oImg = document.createElement("img");
 24                 //创建img元素
 25                 oImg.src = "images/"+dataInt.data[i].src;
 26                 //设置图片引用;
 27                 oPic.appendChild(oImg);
 28 
 29             };
 30             waterfall("main","box");
 31             //将动态生成的数据块进行流式布局;
 32         };
 33     };
 34 };
 35 
 36 //流式布局主函数,自动调整数据块的位置;
 37 function waterfall (parent,box) {
 38     //将main下的所有box元素取出;"parent"代表父级,box代表box元素;
 39     var oParent = document.getElementById(parent);
 40     //将父级元素赋值给变量oParent;
 41     var oBoxs = getByClass(oParent,box);
 42     //通过自定义函数,获取父级下的每一个box元素;得到的是所有box元素的集合;
 43     //再次将这个得到的box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用);
 44     // console.log(oBoxs.length);
 45     //在控制台中打印出box元素的数量,用于调试;
 46 
 47     var oBoxW = oBoxs[0].offsetWidth;
 48     //计算出每一列的宽度;offsetWidth包含内边距在内的宽度;
 49     // console.log(oBoxW);测试;
 50     var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
 51     //计算整个页面显示的列数(页面宽/box的宽);
 52 
 53     oParent.style.cssText = ""+oBoxW*cols+"px;margin:0 auto";
 54     //父元素main的宽度=每一列的宽*列数;并且左右居中;
 55 
 56     var hArr = [];
 57     //存放每一列高度的数组;
 58     for (var i = 0; i < oBoxs.length; i++) {
 59     //遍历oBoxs数组;
 60         if (i<cols) {
 61         //这里符合条件的是第一行的每列的第一个;
 62             hArr.push(oBoxs[i].offsetHeight);
 63             //得出每一列的高度放入数组中;
 64         }else{
 65         //这里的box元素已经不是第一行的元素了;
 66             var minH = Math.min.apply(null,hArr);
 67             //得出第一行的最小高度并赋值给变量;
 68             // console.log(minH);
 69 
 70             var index = getMinhIndex(hArr,minH);
 71             //调用自定义函数获取这个变量的index值;
 72 
 73             oBoxs[i].style.position = "absolute";
 74             oBoxs[i].style.top = minH+"px";
 75             oBoxs[i].style.left = oBoxW*index+"px";
 76             //设置当前元素的位置;
 77             //当前元素的left值=顶上的元素的index值*每列的宽度;
 78             //oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";
 79             //第二种获取当前元素的left值;
 80             //此时在第index列添加了一个box元素;
 81 
 82             hArr[index]+=oBoxs[i].offsetHeight;
 83             //每一列更新后的高度=每一列原来的高度+后来添加的box元素的高度;
 84         };
 85     };
 86 };
 87 
 88 //js原生通过Class获取元素;
 89 function getByClass (parent,claName) {
 90     //通过class获取元素;(在父级parent的容器下获取claName的元素;)
 91     var boxArr = new Array();
 92     //声明数组,用来存储获取到的所有class为box的元素;
 93     var oElements = parent.getElementsByTagName("*")
 94     //声明变量用来存储此父元素下的所有子元素(*);
 95     for (var i = 0; i < oElements.length; i++) {
 96     //遍历数组oElements;
 97         if (oElements[i].className==claName) {
 98         //如果数组中的某一个元素的calss类与参数claName相同;
 99             boxArr.push(oElements[i]);
100             //则把遍历到的这个box元素归类到boxArr数组;
101         };
102     };
103     return boxArr;
104     //调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数;
105 };
106 
107 //获取数组元素的index值;
108 function getMinhIndex (arr,val) {
109 //arr是父级数组;val是当前元素;
110     for(var i in arr){
111     //从0开始遍历;
112         if(arr[i]==val){
113         //找到当前元素在数组中对应的index值;
114             return i;
115             //函数返回值即是当前元素的index值;
116         };
117     };
118 };
119 
120 //检测是否具备了滚动加载数据块的条件;
121 function checkScrollSlide () {
122     var oParent = document.getElementById("main");
123     var oBoxs = getByClass(oParent,"box");
124     var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
125     //最后一个box元素距离页面顶部的高度(找到最后一个box(oBoxs.lenght-1)的offsetTop)+自身的一半;
126     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
127     //浏览器滚动条滚动的距离;
128     // console.log(scrollTop);
129 
130     var height = document.body.clientHeight || document.documentElement.clientHeight;
131     //浏览器视口的高度;
132     // console.log(height);
133     return (lastBoxH<scrollTop+height)?true:false;
134     //页面滚动的距离是否大于最后一个box元素的offsetTop;
135 };
  • 相关阅读:
    刷题94—树（一）
    刷题93—动态规划（十）
    刷题92—动态规划（九）
    刷题91—动态规划（八）
    android Q build 变化
    ubuntu下解压rar文件
    Android PAI （PlayAutoInstall）预装APK 功能
    MTK Android O1平台预置apk
    预置第三方apk到MTK项目相关问题总结
    Android预置Apk方法
  • 原文地址：https://www.cnblogs.com/yizihan/p/4157817.html
Copyright © 2011-2022 走看看