主页 > 前端 > javascript >
来源：未知 时间：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
