瀑布流
上一节
下一节
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>瀑布流</title> | |
| <style> | |
| *{ margin:0; padding:0;} | |
| li{ list-style-type:none;} | |
| img{ border:0;} | |
| #waterFall{ position:relative; margin:0 auto; } | |
| /*.box主要用于定位*/ | |
| .box{ float:left; padding:2px;} | |
| .box div{ border:1px solid #CCC; padding:3px; border-radius:5px;} | |
| .box div img{ width:200px; height:auto;} | |
| </style> | |
| <script> | |
| window.onload = function(){waterFall();}; | |
| //实现瀑布流函数 | |
| function waterFall() | |
| { | |
| //测试waterFall()函数 | |
| //alert("测试waterFall()函数!"); | |
| //获取文档中对象 | |
| //获取waterFall元素 | |
| var oWaterFall = document.getElementById('waterFall'); | |
| //获取box对象集合 | |
| var boxArr = document.getElementsByClassName('box'); | |
| //测试boxArr元素的个数 | |
| //alert(boxArr.length); | |
| //计算一个盒子的宽度 | |
| var boxWidth =boxArr[0].offsetWidth; | |
| //clientWidth= style.width + padding的宽度和 | |
| //offsetWidth= clientWidth + border的宽度和 | |
| //console.log(boxWidth); | |
| //获取浏览器可视窗口的宽度 | |
| var w = document.documentElement.clientWidth; | |
| //console.log(w); | |
| //计算图片的列数 | |
| //Math.floor()是向下取整函数 | |
| var cols = Math.floor(w/boxWidth); | |
| //console.log(cols); | |
| //计算oWaterFall宽度= cols*boxWidth | |
| oWaterFall.style.width = cols*boxWidth + 'px'; | |
| //console.log(oWaterFall.style.width); | |
| //定义存储列高的数组 | |
| //方法1:var hArr = []; | |
| //方法2: | |
| var hArr = new Array(); | |
| //hArr数组是cols列 | |
| //为hArr赋值并对boxArr对象进行绝对定位 | |
| for(var i=0;i<boxArr.length;i++) | |
| { | |
| if(i<cols) | |
| { | |
| //为hArr数组赋初值 | |
| //方法1 | |
| //hArr[i]=boxArr[i].offsetHeight; | |
| //方法2 | |
| hArr.push(boxArr[i].offsetHeight); | |
| //console.log(hArr[i]); | |
| } | |
| else | |
| { | |
| //(1)返回存放列高hArr数组最小值 | |
| //方法1：用JS自带方法 | |
| //var minHeight = Math.min.apply(null,hArr); | |
| //方法2:自定义方法 | |
| var minHeight=minValue(hArr); | |
| //console.log(minHeight); | |
| //(2)返回hArr数组最小值得索引位置 | |
| var index = minIndex(hArr,minHeight); | |
| //console.log(index); | |
| //(3)为boxArr[i]定位 | |
| //绝对定位 | |
| boxArr[i].style.position='absolute'; | |
| //top | |
| boxArr[i].style.top = minHeight + 'px'; | |
| //left | |
| //left = index*boxWidth=索引值*列宽 | |
| boxArr[i].style.left= boxArr[index].offsetLeft + 'px'; | |
| console.log("数组"+hArr+"最小值"+minHeight+"索引"+index) | |
| //(4)更新hArr的列高 | |
| hArr[index]+= boxArr[i].offsetHeight; | |
| } | |
| }//end for | |
| }//end waterFall | |
| //返回数组中最小值函数 | |
| function minValue(arr) | |
| { | |
| var minVal=arr[0]; | |
| //比较过程 | |
| for( var i=1;i<arr.length;i++) | |
| { | |
| if(minVal>arr[i]) | |
| { | |
| minVal=arr[i]; | |
| } | |
| } | |
| return minVal; | |
| } | |
| //返回数组中指定元素的索引位置 | |
| //在arr数组中查找value元素得位置，并返还位置 | |
| function minIndex(arr,value) | |
| { | |
| for(var i in arr) | |
| //for(var i=0;i<arr.length;i++) | |
| { | |
| if(arr[i]==value) | |
| return i; | |
| } | |
| }//end minIndex | |
| </script> | |
| </head> | |
| <body> | |
| <div id="waterFall"> | |
| <div class="box"> | |
| <div><img src="landscapePic/0.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/1.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/2.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/3.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/4.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/5.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/6.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/7.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/8.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/9.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/10.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/11.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/12.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/13.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/14.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/15.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/16.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/17.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/18.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/19.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/20.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/21.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/22.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/23.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/24.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/25.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/26.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/27.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/28.jpg"/></div> | |
| </div> | |
| <div class="box"> | |
| <div><img src="landscapePic/29.jpg"/></div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
