瀑布流布局--原生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 = "width:"+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 };
