为了账号安全,请及时绑定邮箱和手机立即绑定

关于最后利用什么原理把重叠的分开,以及怎么让后面的元素找到那个矮的元素呢?求详解

从代码20开始就有些看不明白了,麻烦把每个代码意思帮我理一理,多谢》

问1:一排6个,他是怎么让后面的比如第7个找到最低的图片排列过去的呢?boxs[i]没说具体是哪个啊

问2:他是怎么把重叠的图片分开的呢?harr[index] += oboxs[i].offsetHeight; 这里的【index】不是最小高 = 最小高+某一元素的自身高度 么?那也没有写他的left top 是多少啊,利用社呢原理分开的呢

//获取classname为cls的数组
        function getByClass(parent,cls){
            var boxArr = new Array(),      //存储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数组中的某一个等于我们传的数字val,返回他索引
        function getIndex(arr,val){
            for(var i in arr){
                if(arr[i]==val){
                    return i;
                }
            }
        }

正在回答

2 回答

hArr[index]+=oBoxs[i].offsetHeight就是hArr[index]=hArr[index]+oBoxs[i].offsetHeight的意思!

另外这是个大循环 for (var i=0;i<oBoxs.length;i++) 遍历每一张图 视频中cols=6(所以hArr数组的长度为6),当i=5时,hArr数组保存了6张图的高(分别是266,286,160,146,155,147),当i=6时(这是进行第7次循环)执行else后面的代码,取出hArr中最小的值minH=146和索引index=3;然后把图片放在第4张图下面; 

如果没有hArr[index]+=oBoxs[i].offsetHeight; 进行 i =7(第8次循环),获得的minH和index和之前是一样的,一直到i=oBoxs.length-1;结束循环 所有图片会放在同一位置!

实际在进行i=7时,第四张图下面已经有一张图了,必然hArr[3]的高度不再是146,而是146加上上一张图的高度

也就是hArr[3]=hArr[3]+oBoxs[6].offsetHeight;

ps:数组下标是从0开始的。


1 回复 有任何疑惑可以回复我~
#1

慕仙5237505 提问者

哦,明白了就是harr[index]266 = harr[index]146 +oBoxs[6].offsetHeight 120;只是index这里值又被盖掉了对吧,啊,终于明白了,多谢,讲真的,这里真的有点绕,感觉大脑容量不够了。。。
2017-11-20 回复 有任何疑惑可以回复我~
#2

慕仙5237505 提问者

非常感谢!DUO多谢大神解惑
2017-11-20 回复 有任何疑惑可以回复我~

答1;16-17行把前6个的高度放入oBoxs【】;然后19行获得高度最小的那一个,20行利用getMinhIndex()得到高度最低那个的索引,最后利用绝对定位21-24行固定下一张的位置;

答2:这个时候我们看见第7张后面所有的图片都重合了,因为oBox数组的值没有改变,导致下一次循环第19行获得的最小高度是相同的,因此我们每排列一张图片就要把它的高度加在对应的数组下面参见第25行!

具体过程:

var hArr=[];

 //循环遍历每一张图片

 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);

  //取出高度最小的值在数组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';

  //将添加的图片的值加如对应的hArr数组中;hArr[index]表示数组中最小的那个,oBoxs[i]代表即将刚放入的图片

  hArr[index]+=oBoxs[i].offsetHeight;

  }

 }

}


0 回复 有任何疑惑可以回复我~
#1

慕仙5237505 提问者

厉害,你比老师说的更清晰一些,你帮我一理一里思路,我感觉好像差不多都懂了,对了还有个小问题哦,就是 hArr[index]+=oBoxs[i].offsetHeight; 这句 它是hArr[index] = hArr[index]+oBoxs[i].offsetHeight意思么?怎么感觉最小索引加上下一个高怎么感觉不通顺,不能加似的。。。 最小索引(2) = 最小索引(2) + 255(假设下个高是255)?
2017-11-20 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于最后利用什么原理把重叠的分开,以及怎么让后面的元素找到那个矮的元素呢?求详解

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信