關(guān)于最后利用什么原理把重疊的分開(kāi)，以及怎么讓后面的元素找到那個(gè)矮的元素呢？求詳解
從代碼20開(kāi)始就有些看不明白了，麻煩把每個(gè)代碼意思幫我理一理，多謝》
問(wèn)1：一排6個(gè)，他是怎么讓后面的比如第7個(gè)找到最低的圖片排列過(guò)去的呢？boxs[i]沒(méi)說(shuō)具體是哪個(gè)啊
問(wèn)2：他是怎么把重疊的圖片分開(kāi)的呢？harr[index] += oboxs[i].offsetHeight; 這里的【index】不是最小高 = 最小高+某一元素的自身高度 么？那也沒(méi)有寫(xiě)他的left top 是多少啊，利用社呢原理分開(kāi)的呢
//獲取classname為cls的數(shù)組
?? ??? ?function getByClass(parent,cls){
?? ??? ??? ?var boxArr = new Array(),????? //存儲(chǔ)class為box的元素
?? ??? ??? ? ??? ?oelements = parent.getElementsByTagName("*");
?? ??? ??? ?for(var i=0; i<oelements.length; i++){
?? ??? ??? ? ??? ?if(oelements[i].className == cls){
?? ??? ??? ? ??? ??? ?boxArr.push(oelements[i]);
?? ??? ??? ? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?return boxArr;
?? ??? ?}
?? ??? ?//獲取最小值的索引,如果arr數(shù)組中的某一個(gè)等于我們傳的數(shù)字val,返回他索引
?? ??? ?function getIndex(arr,val){
?? ??? ??? ?for(var i in arr){
?? ??? ??? ??? ?if(arr[i]==val){
?? ??? ??? ??? ??? ?return i;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
2017-11-20
hArr[index]+=oBoxs[i].offsetHeight就是hArr[index]=hArr[index]+oBoxs[i].offsetHeight的意思！
另外這是個(gè)大循環(huán)?for (var i=0;i<oBoxs.length;i++) 遍歷每一張圖 視頻中cols=6(所以hArr數(shù)組的長(zhǎng)度為6)，當(dāng)i=5時(shí)，hArr數(shù)組保存了6張圖的高（分別是266，286，160，146，155，147），當(dāng)i=6時(shí)（這是進(jìn)行第7次循環(huán)）執(zhí)行else后面的代碼，取出hArr中最小的值minH=146和索引index=3；然后把圖片放在第4張圖下面；?
如果沒(méi)有hArr[index]+=oBoxs[i].offsetHeight; 進(jìn)行 i =7（第8次循環(huán)），獲得的minH和index和之前是一樣的，一直到i=oBoxs.length-1;結(jié)束循環(huán) 所有圖片會(huì)放在同一位置！
實(shí)際在進(jìn)行i=7時(shí)，第四張圖下面已經(jīng)有一張圖了，必然hArr[3]的高度不再是146，而是146加上上一張圖的高度
也就是hArr[3]=hArr[3]+oBoxs[6].offsetHeight;
ps：數(shù)組下標(biāo)是從0開(kāi)始的。
2017-11-20
答1；16-17行把前6個(gè)的高度放入oBoxs【】；然后19行獲得高度最小的那一個(gè)，20行利用getMinhIndex()得到高度最低那個(gè)的索引，最后利用絕對(duì)定位21-24行固定下一張的位置；
答2：這個(gè)時(shí)候我們看見(jiàn)第7張后面所有的圖片都重合了，因?yàn)閛Box數(shù)組的值沒(méi)有改變，導(dǎo)致下一次循環(huán)第19行獲得的最小高度是相同的，因此我們每排列一張圖片就要把它的高度加在對(duì)應(yīng)的數(shù)組下面參見(jiàn)第25行！
具體過(guò)程：
var hArr=[];
?//循環(huán)遍歷每一張圖片
?for (var i=0;i<oBoxs.length;i++) {
? //下雨cols的圖片正常擺放并將高度放如hArr;
? if(i<cols){
? hArr.push(oBoxs[i].offsetHeight);
? }else{
? //取出hArr中高度最小的的值，并用minH保存
? var minH=Math.min.apply(null,hArr);
? //console.log(minH);
? //取出高度最小的值在數(shù)組hArr中的索引
? var index=getMinhIndex(hArr,minH);
? //固定下一張圖的位置
? oBoxs[i].style.position='absolute';
? oBoxs[i].style.top=minH+'px';
? console.log(oBoxW);
? oBoxs[i].style.left=oBoxW*index+'px';
? //將添加的圖片的值加如對(duì)應(yīng)的hArr數(shù)組中；hArr[index]表示數(shù)組中最小的那個(gè)，oBoxs[i]代表即將剛放入的圖片
? hArr[index]+=oBoxs[i].offsetHeight;
? }
?}
}