问题描述
我做了瀑布流网页最外层父DIVwidth:1000px;height:100%;display:blockULposition:relative;width:100%;margin:0auto内层子LIposition:absolute;width:235px;height:auto;overflow:hidden;最下方width:100%;height:430px;padding:0;margin:0;子层li设定了position:absolute，是为了让他因图文高度不同而有所层次，产生瀑布流效果但页面下方有一个footerdiv，包夹了网站工具和宣告，因为上方position:absolute，浮动在上面，父层不晓得他的高度，因此footer重叠到最上方了！因为我有很多页面要共用此css和js，每一页图文高度都无法确认，所以我不行在父层设定高度，请问是否有方法让网页计算载入图文的高度，然后传送给父层DIV，这样FOOTER就不会重叠了？页码如下：<divclass"itn_ccbox"><ulid="lin_box"><li><divid="itn_box"><imgsrc="1.jpg"width="235"></div><divclass="title">标题</div><divclass="price">xxx元起</div></li><li><divid="itn_box"><imgsrc="1.jpg"width="235"></div><divclass="title">标题</div><divclass="price">xxx元起</div></li></ul></div><divclass="footer_box"></div>js页码如下：varmargin=15;varli=$("#lin_boxli");varli_W=li[0].offsetWidth+margin;functionliuxiaofan(){varh=[];varn=3for(vari=0;i<li.length;i++){li_H=li[i].offsetHeight;if(i<n){h[i]=li_H;li.eq(i).css("top",0);li.eq(i).css("left",i*li_W);}else{min_H=Math.min.apply(null,h);minKey=getarraykey(h,min_H);h[minKey]+=li_H+margin;li.eq(i).css("top",min_H+margin);li.eq(i).css("left",minKey*li_W);}}}functiongetarraykey(s,v){for(kins){if(s[k]==v){returnk;}}}window.onload=function(){liuxiaofan();};window.onresize=function(){liuxiaofan();};再麻烦大家协助我帮我解答谢谢
解决方案
解决方案二：
window.onload=function(){onloadImages("container","box");}window.onscroll=function(){if(dongtaitianjia("container","box")){varimgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"}]}varcontainerDiv=document.getElementById("container");//获取id=“container”的divfor(vari=0;i<imgData.data.length;i++){varboxDiv=document.createElement("div");//动态创建div标签boxDiv.className="box";//动态设置div的class="box"containerDiv.appendChild(boxDiv);//动态添加containerDiv子节点varborderImgDiv=document.createElement("div");//动态创建div标签borderImgDiv.className="border_img";//动态设置div的class="border_img"boxDiv.appendChild(borderImgDiv);//动态添加boxDiv子节点varboxImg=document.createElement("img");//动态创建img标签boxImg.src="images/"+imgData.data[i].src;borderImgDiv.appendChild(boxImg);//动态添加boxDiv子节点}onloadImages("container","box");}}//判断是否要加载内容functiondongtaitianjia(parent,box){varcontainerChilder=document.getElementById(parent);//获取container下的集合varboxList=containerChilder.getElementsByClassName(box);//获取所有的.box集合varlastBoxOffsetTop=boxList[boxList.length-1].offsetTop;//最后一个.box集合元素的offsetTopvarpingmuHeight=document.documentElement.clientHeight||document.body.clientHeight;//内容区的高度varscrollHeight=document.documentElement.scrollTop||document.body.scrollTop;//滚动的高度if(lastBoxOffsetTop<pingmuHeight+scrollHeight){returntrue;}else{returnfalse;}}functiononloadImages(parent,box){varcontainerChilder=document.getElementById(parent);//获取container下的集合varboxList=containerChilder.getElementsByClassName(box);//获取所有的.box集合varnum=Math.floor(document.documentElement.clientWidth/boxList[0].offsetWidth);//得到一行能放几张图片containerChilder.style.cssText="width:"+num*boxList[0].offsetWidth+"px;margin:0auto;"//设置宽度，居中varboxHeightArray=[];//第一行.box集合高度的集合for(vari=0;i<boxList.length;i++){if(i<num){boxHeightArray.push(boxList[i].offsetHeight);//第一行.box的高度集合}else{varminArrayHeight=Math.min.apply(null,boxHeightArray);//获取集合中的最小值，也就是高度最小的那个varminHeightIndex=getMinHeightArray(boxHeightArray,minArrayHeight);//获取高度最小的那个.box集合位置boxList[i].style.position="absolute";//设置绝对定位boxList[i].style.left=boxList[minHeightIndex].offsetLeft+"px";boxList[i].style.top=minArrayHeight+"px";boxHeightArray[minHeightIndex]=boxHeightArray[minHeightIndex]+boxList[i].offsetHeight;//把集合中最矮的加上放在下面的元素的高度，避免所有的元素都挤在一起}}}//获取高度最小的那个.box集合位置functiongetMinHeightArray(array,minHeight){for(vari=0;i<array.length;i++){if(array[i]==minHeight){returni;}}}
*{margin:0;padding:0;}#container{position:relative;}.box{padding:5px;float:left;}.border_img{border:1pxsolid#ccc;border-radius:5px;box-shadow:005px#ccc;padding:5px;}.border_imgimg{width:190px;height:auto;}
<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>瀑布流</title><linkhref="css/pubuliu.css"rel="stylesheet"type="text/css"/><scriptsrc="js/pubuliu.js"></script></head><body><divid="container"><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/2.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/3.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/4.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/5.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/6.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/7.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/8.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/9.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/2.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/3.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/4.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/5.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/6.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/7.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/8.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/9.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/2.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/3.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/4.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/5.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/6.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/7.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/8.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/9.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/2.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/3.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/4.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/5.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/6.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/7.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/8.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/9.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/1.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/2.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/3.jpg"/></div></div><divclass="box"><divclass="border_img"><imgsrc="images/4.jpg"/></div></div></div></body></html>
解决方案三：
哇！太感谢您！帮了大忙回覆速度快又准确谢谢让我上了一堂当(弯腰)