2回答

• 

  慕媛

  2015-06-16 10:41:54

  <script type=”text/javascript”>
   window.onload=function(){
       waterfall('main','box');
  }
  function waterfall(parent,box){
    var oParent=document.getElementById(parent);
    var oBoxs=getByClass(oParent,box);
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
    oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto;';
    var hArr = [];
  for(var i=0;i<oBoxs.length;i++){
      if(i<cols){
         // 将图片的高度值添加到数组中
         hArr.push(oBoxs[i].offsetHeight);
      }else{
        // 求最小值和最小值的索引
        var minH = Math.min.apply(null,hArr);

  // 计算及定义图片出现的位置
        oBoxs[i].style.position='absolute';
        var index = getMinhIndex(hArr,minH);
       
        // 改变数组值
       oBoxs[i].style.position='absolute';
        oBoxs[i].style.top=minH+'px';
     oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
     hArr[index]+=oBoxs[i].offsetHeight;
      }
    }
  function getByClass(parent,clsName){
    var boxArr=new Array(),
        oElements=parent.getElementsByTagName('*');
    for(var i=0;i<oElements.length;i++){
      if(oElements[i].className==clsName){
        boxArr.push(oElements[i]);
      }
    }
    return boxArr;
  }

  // 求值在数组中的索引,arr接收的是数组，val接收的是判断的值
  function getMinhIndex(arr,val){
      for(var i in arr){
          if(arr[i] == val){
     return i;
    }
   }
  }
  </script>

  0 0
• 

  慕媛

  2015-06-16 10:35:39

  function getByClass(clsName, parent){
   //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素 
  parent = parent?parent:document;
  var onArr=new Array(),
      onEls=parent.getElementsByTagName('*');
     for(var i=0;i<onEls.length;i++)
     {
         if(onEls[i].className==clsName){
             onArr.push(onEls[i]);
         }
     }

      return onArr;   

  }

  0 0