个回答

• Rhinel

  2015-05-23 10:45:55

  function waterfall(parent,pin){
      var oParent=document.getElementById(parent);// 父级对象
      var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
      var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
      var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
      oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
  
      var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
      for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
          var pinH=aPin[i].offsetHeight;
          if(i<num){
              pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
              aPin[i].style.cssText=''; //加上这句就可以了，清掉第一行的style属性
          }else{
              var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
              var minHIndex=getminHIndex(pinHArr,minH);
              aPin[i].style.position='absolute';//设置绝对位移
              aPin[i].style.top=minH+'px';
              aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
              //数组 最小高元素的高 + 添加上的aPin[i]块框高
              pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
          }
      }
  }

  
  

  0

• Rhinel

  2015-05-23 10:44:57

  因为变窄的时候已经给掉下去的图片加上了position属性和top，left值；而放大窗口的时候他们本该重回第一列的时候这些style属性没有清掉；

  
  

  0