网站地图    收藏   

主页 > 前端 > javascript >

纯js 自制瀑布流效果

来源:未知    时间:2014-09-21 22:34 作者:xbdadmin 阅读:

[导读] !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瀑布流/...

<!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><!-- box_1 -->
 
</body>
</html>
 

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论