前言

完成一個動漫人物的瀑布流布局，分別通過原生JavaScript、Css3和Jquery方式實現。
首先是使用JavaScript。

一、創建基本框架

1 HTML結構

<main>                    //便於以後進行 相對定位
    <div class="wrap">    //為了方便設置圖片和圖片之間樣式+絕對定位
      <div class="pic">   //包裹圖片，設置單個圖片的樣式
        <img src="img/1.jpg" alt="圖片1">
      </div>
    </div> 
</main>
 

2 CSS基本樣式

*{                       /* 簡單全局重置 */
  margin: 0;
  padding: 0;
}

main{
  position: relative;    /*相對布局*/
}

.wrap{
  padding: 15px 0 0 15px;  /*設置內邊距，便於以後JS計算高度*/
}

.pic{
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;          /*設置邊框圓角 */
  box-shadow: 0 0 6px #ccc;  /*水平、垂直偏移；模糊度；顏色*/
}

.pic img{
  width: 162px;    /*瀑布流特點，圖片等寬不等高 */
  height: auto;
}
 

二、設置圖片的定位 和 排序

1 設置列數和main的寬度

window.onload=function(){
  waterfall("main",".wrap");
}

function waterfall(parent,box){
  var oneparent = document.querySelector(parent);   //獲取main元素
  
  //S1 獲取main元素裏面的所有 類warp元素
  var boxs = oneparent.querySelectorAll(box);    
  
  //S2 計算整個頁面顯示的列數；（頁面寬/每列的盒子wrap寬）
  var oneboxwidth = boxs[0].offsetWidth;    //每列的盒子wrap寬
  var cols = Math.floor(document.documentElement.clientWidth / oneboxwidth) ; //獲取 整數列數
  
  //S3 設置main的 固定寬度
  oneparent.style.cssText = ‘width:‘ + (oneboxwidth * cols)+‘px; margin:0 auto‘;
}
 

2 獲取第一列圖片的高度

window.onload=function(){
  waterfall("main",".wrap");
}

function waterfall(parent,box){
  var oneparent = document.querySelector(parent);   //獲取main元素
  
  // 獲取main元素裏面的所有 類warp元素
  var boxs = oneparent.querySelectorAll(box);    
  ......
  ......
  //獲取第一列圖片的高度
  //S1 存放數據的 數組
  var boxsHeightArry = [];
  //S2 獲取圖片高度並存放
  for (var i=0; i<boxs.length; i++){
    if(i < cols){
      boxsHeightArry.push(boxs[i].offsetHeight);
    }
  }
  console.log(boxsHeightArry);
}

3 絕對定位，把以後的圖片，都放到第一行最矮的下方

 //S1 存放數據的 數組
  var boxsHeightArry = [];
  //S2 獲取圖片高度並存放
  for (var i=0; i<boxs.length; i++){
    if(i < cols){
      boxsHeightArry.push(boxs[i].offsetHeight);
    }else{
      //S1 獲取第一行的最小值&索引值
      minBoxHeight = Math.min.apply(null,boxsHeightArry);
      minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);
      //S2 調試   console.log( minBoxHeightIndex);
      //S3 設置第二行及以後行 圖片的絕對定位位置
       boxs[i].style.position = "absolute";
      boxs[i].style.top = minBoxHeight + ‘px‘;
      boxs[i].style.left = oneboxwidth * minBoxHeightIndex + ‘px‘;
    }
  }

4 每次循環時都增加後放的圖片的高度，從而改變數組裏最矮的值

else{ 
      //S1 獲取第一行的最小值&索引值
      minBoxHeight = Math.min.apply(null,boxsHeightArry);
      minBoxHeightIndex = boxsHeightArry.indexOf(minBoxHeight);
      //S2 調試 console.log( minBoxHeightIndex);

      //S3 設置第二行及以後行圖片的 絕對定位位置
      boxs[i].style.position = "absolute";
      boxs[i].style.top = minBoxHeight + ‘px‘;
 // boxs[i].style.left = oneboxwidth * minBoxHeightIndex + ‘px‘;
    boxs[i].style.left = boxs[minBoxHeightIndex].offsetLeft + ‘px‘;

 //從第二行開始，每次循環時都增加後放的圖片的高度，從而改變數組裏最矮的值
      boxsHeightArry[minBoxHeightIndex] += boxs[i].offsetHeight;
}

四 Reference

??1 js改變css樣式的三種方法;

瀑布流布局（1）