关于瀑布流相对定位后问题，求大神解答~
添加了瀑布流的效果之后，想添加个页脚在下面，但都被瀑布流的图片覆盖了，求大神帮忙看看T^T
附上代码
<!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" />
<link rel="stylesheet" type="text/css" href="style/web.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script>
$(window).on('load',function(){
waterfall();
var dataInt={};
$(window).on('scroll',function(){
if(checkScrollSlide()){
$.each(dataInt.data,function(key,value){
var oBox=$('<div>').addClass('box').appendTo($('#mian'));
var oTu=$('<div>').addClass('tu').appendTo($(oBox));
var oImg=$('<img>').attr('src',$(value).attr('src')).appendTo($(oTu));
})
waterfall();
}
})
})
function waterfall(){
var $boxs=$('#mian>div');
var w=$boxs.eq(1).outerWidth();
var cols=Math.floor($(window).width()/w);
$('#mian').width(w*cols).css('margin','0 auto');
var hArr=[];
$boxs.each(function(index,value){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr[index]=h;
}else{
var minH=Math.min.apply(null,hArr);
var minHIndex=$.inArray(minH,hArr);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
})
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var $lastBox=$('#mian>div').last();
var lastBoxDis=$lastBox.offset().top+$lastBox.outerHeight();
var scrllTop=$(window).scrollTop();
//if(contentH - viewH - scrollTop <= 100);
var documentH=$(window).height();
console.log(lastBoxDis);
console.log(scrllTop + documentH);
return (lastBoxDis<=scrllTop+documentH)?true:false;
}
</script>
<title>无标题文档</title>
</head>
<body>
<div class="weizhi">
<img src="images/zuobiao.png" /><p>您当前所在位置：<a href="#">首页 > 产品展示</p>
</div>
<div class="hengxian">
<hr size="1px" color="eeeeee" />
</div>
<!--瀑布流-->
<div id="mian">
<div class="box">
<div class="tu">
<img src="images/ceshi (1).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (2).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (3).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (4).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (5).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (6).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (7).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (8).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (9).jpg" />
</div>
</div>
<div class="box">
<div class="tu">
<img src="images/ceshi (10).jpg" />
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="fy">
</div>
</body>
</html>*{ padding:0; margin:0; font-family:"微软雅黑"; list-style:none; text-decoration:none; font-size:15px; outline:none;}
.weizhi{height:30px;margin-top:80px; overflow:hidden;}
.weizhi img{ float:left;margin-left:60px; margin-top:10px;}
.weizhi p{ float:left; margin-left:10px; line-height:10px; font-size:15px;}
.weizhi p a{ color:#666;}
.hengxian{ margin-top:5px; padding:0 50px 0 60px;}
/*瀑布流*/
#mian{position:relative; z-index:998;}
.box{padding:10px 0 0 10px; float:left; margin-top:50px; margin-bottom:20px;}
.tu{padding:1px;}
.tu img{width:350px; height:auto;}
/*深灰色框*/
.fy{width:1000px; height:80px; background:#333; margin:0 auto;}
慕姐0693551浏览 1636回答 5
5回答
-
慕姐0693551
这是没增加图片和增加图片后的效果 -
慕姐0693551
像这样的额- - -
李晓健
.fy{width:1000px; height:80px; background:#333; margin:0 auto;position: fixed;bottom: 0;z-index: 1000;}试试
随时随地看视频慕课网APP
Html/CSS
JQuery