首頁猿問圖片有相同高度的怎么實現(xiàn)瀑布流？

圖片有相同高度的怎么實現(xiàn)瀑布流？

CSS3 JavaScript 前端工具

大黑虎 2016-01-17 00:44:51

下面這段代碼在瀏覽器上運行正確，但在慕課網(wǎng)上運行有bug,大牛請指點?。?！如果有相同高度的圖片怎么改下列，代碼實現(xiàn)瀑布流？？<!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>>? ?<title>瀑布流布局</title>? ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />? ?<style type="text/css">? ?*{padding:0;margin:0;}#main{position:relative;}.box{padding:10px 0 0 10px;float:left;}.pic{ padding:5px; border:1px solid #999; border-radius:5px; box-shadow:0 0 5 #999;}.pic img{width:230px;height:auto;}</style>?</head>?<script type="text/javascript">window.onload=function(){ waterfall("main","box"); var dataimg={"data":[{"src":"http://pic17.nipic.com/20111025/6957597_163322054332_2.jpg"}, ? ? ? ? ? ? ? ? ? ? {"src":"http://pica.nipic.com/2007-12-03/2007123141415713_2.jpg"}, {"src":"http://pic4.nipic.com/20090823/3193830_121855091_2.jpg"}, {"src":"http://pic.nipic.com/2008-01-16/200811683222770_2.jpg"}, {"src":"http://pic9.nipic.com/20100904/5041436_154436449375_2.jpg"}, {"src":"http://pic1.nipic.com/2008-12-09/200812912540990_2.jpg"}, {"src":"http://pic19.nipic.com/20120315/4758005_091854125000_2.jpg"}, {"src":"http://pic1a.nipic.com/2008-10-27/200810279545868_2.jpg"}, {"src":"http://pic3.nipic.com/20090525/2416945_231841034_2.jpg"}, {"src":"http://pica.nipic.com/2007-12-03/2007123152823533_2.jpg"} ]} window.onscroll=function(){ if(scrollposition("main","box")){ oparent=document.getElementById("main"); for(var j=0;j<dataimg.data.length;j++){ ? var adiv=document.createElement("div"); //添加元素節(jié)點? ? ? ? ? ? ? ? adiv.className='box'; ? ? ? ? ? ? ? ? ? //添加類名 name屬性? ? ? ? ? ? ? ? oparent.appendChild(adiv); ? ? ? ? ? ? ?//添加子節(jié)點? ? ? ? ? ? ? ? var oBox=document.createElement('div');? ? ? ? ? ? ? ? oBox.className='pic';? ? ? ? ? ? ? ? adiv.appendChild(oBox);? ? ? ? ? ? ? ? var oImg=document.createElement('img');? ? ? ? ? ? ? ? oImg.src=dataimg.data[j].src;? ? ? ? ? ? ? ? oBox.appendChild(oImg); } ? waterfall('main','box'); }? ?}}function scrollposition(parent,box){ var oBoxs=getByClass(box,parent); var hp=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);? ? var scrtop=document.documentElement.scrollTop || document.body.scrollTop; var mainH=document.documentElement.clientHeight; if(hp<scrtop+mainH){ return true; }else{ return false; } }function waterfall(parent,box){ var oBoxs=getByClass(box,parent); var mainW=document.documentElement.clientWidth; var oBoxW=oBoxs[0].offsetWidth; var clos=Math.floor(document.documentElement.clientWidth/oBoxW); var oparent=document.getElementById(parent); oparent.style.cssText='width:'+oBoxW*clos+'px; margin:0 auto;'; var arr=new Array(); for(var i=0;i<oBoxs.length;i++){ var oBoxH=oBoxs[i].offsetHeight; if(i<clos){ arr.push(oBoxs[i].offsetHeight); }else{ var minH=Math.min.apply(null,arr); var index=getMinHindex(arr,minH); oBoxs[i].style.position='absolute'; oBoxs[i].style.top=minH+'px'; oBoxs[i].style.left=oBoxs[index].offsetLeft+'px' arr[index]+=oBoxs[i].offsetHeight; }? ?}}function getMinHindex(arr,val){? ?for(var j=0;j<arr.length;j++){? ?if(arr[j]<=val){ ?? ? return j; ? }? ?? ?}}function getByClass(clsName, parent){?//定義函數(shù)getByClass()實現(xiàn)獲取document或指定父元素下所有class為on的元素 ?? ? ?var oelements;? ? ?if(parent){? ? ? ? ?oelements=document.getElementById(parent).getElementsByTagName("*");? ? ? ? ?? ? ? ? ?}else{? ? oelements=document.getElementsByTagName("*");? ? }? ? ?var elearr=new Array();? ? ?for(var i=0;i<oelements.length;i++){? ? ? ? ?if(oelements[i].className==clsName){? ? ? ? ? ? ?elearr.push(oelements[i]);? ? ? ? ?}? ? ?}? ? return elearr;}</script>?<body>? ? ?<div id="main">? <div class="box">? <div class="pic">? <img src=http://image.tianjimedia.com/uploadImages/2011/252/8GO666XNQM49.jpg />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://hiphotos.baidu.com/1985129/pic/item/d05c8ed3cc27b16e970a16b1.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic2.nipic.com/20090415/2137336_074730000_2.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic1.nipic.com/20090320/657979_215251058_2.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic32.nipic.com/20130715/13232606_164243348120_2.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pic.duowan.com/tx2/1205/201189276629/201189504837.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://imgsrc.baidu.com/forum/pic/item/c69ae2003af33a87ecb1c796c65c10385143b585.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://s6.sinaimg.cn/middle/6753066ftc67bdde1ca25&690" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://ww1.sinaimg.cn/mw600/8758e340jw1e80ptpik3sj21hc0u0gxb.jpg" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://s7.sinaimg.cn/middle/73c68f59ha24176b9fff6&690" />? </div>? </div>? <div class="box">? <div class="pic">? <img src="http://pub.chinaunix.net/uploadfile/201204/20120422080605108.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://img1.ph.126.net/f0PNgS5xHvIoP87RDZIh3w==/6597568944937413022.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://images.ali213.net/picfile/pic/2012-12-25/927_q28.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://img2.3lian.com/2014/f7/5/22.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://cdnq.duitang.com/uploads/item/201504/27/20150427155902_8ZFeT.jpeg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://img05.tooopen.com/images/20150314/tooopen_sy_82508981539.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://imgsrc.baidu.com/forum/pic/item/0ea6ba6eddc451da3189c429b6fd5266d116326c.jpg" />? </div>? </div>? ? ? ? <div class="box">? <div class="pic">? <img src="http://imgsrc.baidu.com/forum/pic/item/08afc680b1b6534c495403a9.jpg" />? </div>? </div> </div>?</body></html>

查看完整描述