纯js 自制瀑布流效果

2023/12/01 · admin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>瀑布流</title> <style type="text/css"> *{ margin:0px; padding:0px; } ul,li{ display:block; list-style:none;} .box_1{ width:980px; margin:20px auto;} .box_1 ul{ width:980px; text-align:center; position:relative; height:auto;} .box_1 ul li{ width:306px; position:absolute; } .box_1 ul li img{ display:block; border:0px; width:306px;} </style> </head> <body> <script language="javascript"> window.onload = function(){ var doc = document; //获得第一个ul var ul1 = doc.getElementsByClassName("box_1")[0].children[0]; var lis = ul1.children; //实列化最外围盒子高度 var _tops = {l:[],m:[],r:[]}; for(i=0; i<lis.length; i++){ var _nowindex = i%3; switch(_nowindex){ case 0: lis[i].style.left = "0px"; //把当前的高度放入盒子 _tops.l.push(lis[i].offsetHeight); var step = Math.floor(i/3); if(step == 0 ){ lis[i].style.top = "0px"; }else{ var nums = 0; for(z=0; z<step; z++){ nums += _tops.l[z]+5; } //得到结果开始设置高度 lis[i].style.top = nums+"px"; } break; case 1: lis[i].style.left = "311px"; //把当前的高度放入盒子 _tops.m.push(lis[i].offsetHeight); var step = Math.floor(i/3); if(step == 0 ){ lis[i].style.top = "0px"; }else{ var nums = 0; for(z=0; z<step; z++){ nums += _tops.m[z]+5; } //得到结果开始设置高度 lis[i].style.top = nums+"px"; } break; case 2: lis[i].style.left = "622px"; //把当前的高度放入盒子 _tops.r.push(lis[i].offsetHeight); var step = Math.floor(i/3); if(step == 0 ){ lis[i].style.top = "0px"; }else{ var nums = 0; for(z=0; z<step; z++){ nums += _tops.r[z]+5; } //得到结果开始设置高度 lis[i].style.top = nums+"px"; } break; } }//for 结束 } window.onscroll = function(){ var doc = document; //获得第一个ul var ul1 = doc.getElementsByClassName("box_1")[0].children[0]; var lis = ul1.children; var win_h = window.innerHeight; var veiwHeight = document.documentElement.clientHeight; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var lastli_top = getlastli_top(lis); if(lastli_top<(win_h+scrollY)){ console.log(win_h+scrollY); } } function getlastli_top(obj){ last_o = obj[obj.lenght-1]; obj_len = obj.length; return obj[obj_len-1].offsetTop } </script> <div class="box_1"> <ul> <li> <img src="2.jpg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="5.jpg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="7.jpg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="1.jpeg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="4.jpg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="8.jpg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="3.jpeg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="9.jpg" alt="2"/> <p>zhangsan</p> </li> <li> <img src="7.jpg" alt="2"/> <p>zhangsan</p> </li> </ul> </div> </body> </html>

纯js 自制瀑布流效果

相关文章

最新评论

最近发表

网站分类

文章归档