瀑布流布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了瀑布流布局相关的知识，希望对你有一定的参考价值。
用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释
效果如图：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>瀑布流布局-JS实现</title> 6 </head> 7 <style type="text/css"> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 #main{ 13 position: relative;/*整体相对定位，因为每个小图片盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/ 14 } 15 .box{ 16 padding: 15px 0 0 15px;/*padding为内边距，后面js获取的高度包括padding的距离*/ 17 float: left; 18 } 19 .pic{ 20 padding: 10px; 21 border: 1px solid #ccc; 22 border-radius: 5px; 23 box-shadow: 0 0 5px #ccc; 24 } 25 .pic img{ 26 width: 165px; 27 height: auto; 28 } 29 </style> 30 <script type="text/javascript"> 31 window.onload=function(){ 32 var oParent=document.getElementById("main"); 33 var oBoxs=oParent.getElementsByClassName("box"); 34 waterfall(‘main‘,‘box‘);//调用瀑布布局的函数 35 var dataInt={"data":[{"src":‘23.jpg‘},{"src":‘24.jpg‘},{"src":‘25.jpg‘}]}//模拟出要加载的图片 36 window.onscroll=function(){ 37 if(checkscrollSlide()){//如果调用函数的返回结果为true 38 //将数据块渲染到当前页面底部 39 for(var i=0;i<dataInt.data.length;i++){//dataInt对象的data属性的长度 40 var oBox=document.createElement(‘div‘); 41 oBox.className=‘box‘; 42 oParent.appendChild(oBox);//添加到父元素的最后 43 var oPic=document.createElement(‘div‘); 44 oPic.className=‘pic‘; 45 oBox.appendChild(oPic); 46 var oImg=document.createElement(‘img‘); 47 oImg.src="img/"+dataInt.data[i].src; 48 oPic.appendChild(oImg); 49 } 50 waterfall(‘main‘,‘box‘); 51 }; 52 } 53 function waterfall(parent,box){ 54 var oParent=document.getElementById(parent); 55 var oBoxs=oParent.getElementsByClassName(box); 56 var oBoxW=oBoxs[0].offsetWidth;//计算每个box的宽度 57 //计算整个页面显示的列数（页面宽/box的宽） 58 var cols=Math.floor(document.documentElement.clientWidth/oBoxW); 59 //设置main的宽,居中 60 oParent.style.cssText=‘width:‘+oBoxW*cols+‘px;margin:0 auto;‘; 61 var hArr=[];//存放每一列高度的数组 62 for(var i=0;i<oBoxs.length;i++){ 63 if(i<cols){ 64 hArr.push(oBoxs[i].offsetHeight);//将第一行的各个高度加到数组中 65 }else{ 66 var minH=Math.min.apply(null,hArr);//apply方法可以改变数组的指向,因为Math.min方法不支持数组 67 var index=getMinhIndex(hArr,minH); 68 oBoxs[i].style.position=‘absolute‘; 69 oBoxs[i].style.top=minH+‘px‘; 70 oBoxs[i].style.left=oBoxs[index].offsetLeft+‘px‘; 71 hArr[index]+=oBoxs[i].offsetHeight; 72 } 73 } 74 } 75 function getMinhIndex(arr,val){ 76 for(var i in arr){ 77 if(arr[i]==val){ 78 return i; 79 } 80 81 } 82 } 83 //检测是否具备了滚动条加载数据块的条件 84 function checkscrollSlide(){ 85 //最后一个盒子的距顶部的高度加上自身高度的一半 86 var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+ Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); 87 //页面滚走的距离 88 var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; 89 //当前浏览器窗口可视区域高度 90 var height=document.body.clientHeight||document.documentElement.clientHeight; 91 return (lastBoxH<scrollTop+height) ? true : false; 92 } 93 } 94 95 96 </script> 97 <body> 98 <div id="main"> 99 <div class="box"> 100 <div class="pic"> 101 <img src="img/0.jpg" /> 102 </div> 103 </div> 104 <div class="box"> 105 <div class="pic"> 106 <img src="img/1.jpg" /> 107 </div> 108 </div> 109 <div class="box"> 110 <div class="pic"> 111 <img src="img/2.jpg" /> 112 </div> 113 </div> 114 <div class="box"> 115 <div class="pic"> 116 <img src="img/3.jpg" /> 117 </div> 118 </div> 119 <div class="box"> 120 <div class="pic"> 121 <img src="img/4.jpg" /> 122 </div> 123 </div> 124 <div class="box"> 125 <div class="pic"> 126 <img src="img/5.jpg" /> 127 </div> 128 </div> 129 <div class="box"> 130 <div class="pic"> 131 <img src="img/6.jpg" /> 132 </div> 133 </div> 134 <div class="box"> 135 <div class="pic"> 136 <img src="img/7.jpg" /> 137 </div> 138 </div> 139 <div class="box"> 140 <div class="pic"> 141 <img src="img/8.jpg" /> 142 </div> 143 </div> 144 <div class="box"> 145 <div class="pic"> 146 <img src="img/9.jpg" /> 147 </div> 148 </div> 149 <div class="box"> 150 <div class="pic"> 151 <img src="img/10.jpg" /> 152 </div> 153 </div> 154 <div class="box"> 155 <div class="pic"> 156 <img src="img/11.jpg" /> 157 </div> 158 </div> 159 <div class="box"> 160 <div class="pic"> 161 <img src="img/12.jpg" /> 162 </div> 163 </div> 164 <div class="box"> 165 <div class="pic"> 166 <img src="img/13.jpg" /> 167 </div> 168 </div> 169 <div class="box"> 170 <div class="pic"> 171 <img src="img/14.jpg" /> 172 </div> 173 </div> 174 <div class="box"> 175 <div class="pic"> 176 <img src="img/15.jpg" /> 177 </div> 178 </div> 179 <div class="box"> 180 <div class="pic"> 181 <img src="img/16.jpg" /> 182 </div> 183 </div> 184 <div class="box"> 185 <div class="pic"> 186 <img src="img/17.jpg" /> 187 </div> 188 </div> 189 <div class="box"> 190 <div class="pic"> 191 <img src="img/18.jpg" /> 192 </div> 193 </div> 194 <div class="box"> 195 <div class="pic"> 196 <img src="img/19.jpg" /> 197 </div> 198 </div> 199 <div class="box"> 200 <div class="pic"> 201 <img src="img/20.jpg" /> 202 </div> 203 </div> 204 <div class="box"> 205 <div class="pic"> 206 <img src="img/21.jpg" /> 207 </div> 208 </div> 209 <div class="box"> 210 <div class="pic"> 211 <img src="img/22.jpg" /> 212 </div> 213 </div> 214 215 </div> 216 </body> 217 </html>
以上是关于瀑布流布局的主要内容，如果未能解决你的问题，请参考以下文章