添加了瀑布流的效果之后，想添加個頁腳在下面，但都被瀑布流的圖片覆蓋了，求大神幫忙看看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;}
5 回答
- 5 回答
- 0 關注
- 1717 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消