實現瀑布流佈局的兩個方法

瀑布流佈局是一個之前挺火，現在也比較常見的一種佈局

這種看起來參差不齊的多欄佈局，重點在於每個元素等寬不等高，一般圖片網站應用較多

隨著頁面滾動，數據塊會在每列底部不斷加載，理論上可以無限加載，且不會頁面美觀

#Pinterest 、花瓣網都是比較成熟的採用瀑布流佈局的網站

效果圖：

#一、經典套路：JavaScript + 絕對定位

HTML 結構：

<div id="main">
  ...  <div class="box">
    <div class="wrapper">
      <div class="pic"><img  src="" / alt="實現瀑布流佈局的兩個方法" ></div>
      <div class="text">简单介绍</div>
    </div>
  </div>
  ...</div>

整個瀑布流區域用一個

作為父容器

瀑布流中的每個資料塊用.box 作為基本佈局， .wrapper 呈現樣式和實際內容

CSS 樣式：

* {margin: 0; padding: 0;}html, body {width: 100%; height: 100%; background-color: #EDEDED;}#main {
  position: relative;
  width: 1280px; /*限定父容器的宽度*/
  margin: 0 auto;
}.box {
  position: absolute;
  padding: 7px; /*不建议使用 margin*/
  box-sizing: border-box;
  width: 256px; /*限定数据块的宽度*/}.wrapper {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}.pic {
  font-size: 0; /*消除行内元素的间隙*/}.pic img {
  width: 100%;
  height: auto;
}.text {
  color: #999;
  background: #FAFAFA;
  font-size: 14px;
  padding-top: 5px;
}

在.box 中設定了padding 是為了留出視覺上的間距

之所以不使用margin，是因為後面會使用js 取得元素的offsetWidth 和offsetHeight

而這兩個屬性值是不計算margin 的

JavaScript：

window.onload = function() {
  waterFall('main', 'box')
}
function waterFall(main, box) {  var main = document.getElementById(main);  var boxs = main.getElementsByClassName(box);  var boxWidth = boxs[0].offsetWidth; //获取每个数据块的宽度
  var mainWidh = main.offsetWidth; //获取主容器的宽度
  var cols = Math.floor(mainWidh / boxWidth); //计算列数
  
  var heightArr = []; //定义一个存放 top 值的数组
  for(var i = 0; i < boxs.length; i++) {    var boxHeight = boxs[i].offsetHeight;      if(i < cols) { //第一行        heightArr.push(boxs[i].offsetHeight);
        boxs[i].style.top = &#39;0px&#39;; 
        boxs[i].style.left = i * boxWidth +&#39;px&#39;;
      } else {        //求出最矮盒子的高度
        var minBoxHeight = Math.min.apply(this, heightArr); 
        //求出最矮盒子的索引 
        var minBoxIndex = getIndex(minBoxHeight, heightArr); 
        boxs[i].style.top = minBoxHeight + &#39;px&#39;; //顶部间距即最矮盒子的高度
        boxs[i].style.left = minBoxIndex * boxWidth +&#39;px&#39;; 
        //关键:更新最矮盒子的高度
        heightArr[minBoxIndex] += boxHeight;
      } 
  }
}
function getIndex(val, arr) {  for(var i in arr) {    if(val == arr[i]) {      return i;
    }
  }
}

##這種方案一開始給.box設定了position: absolute;

所以在開啟頁面的時候，如果頁面效能較差，可能會出現所有資料區塊堆疊在一起的情況

可以將.box 的position: absolute替換為float: left，然後在js 添加定位樣式的時候，再補上position: absolute，視覺上會有所改觀

二、純CSS3 實現瀑布流

#CSS3 中新增加了一個屬性 column，可以透過規定列數column-count，讓瀏覽器自適應佈局

只需要刪除上面的JavaScript 部分，然後修改#main 和.box：

#main {
  width: 1280px;
  margin: 0 auto;
  -webkit-column-count: 5;
  column-count: 5;
  -webkit-column-gap: 0;
  column-gap: 0;
}.box {
  padding: 7px;
  box-sizing: border-box;
  width: 256px;
}

但透過這種方式實現的瀑布流，實際上是按照縱向排列的，而之前的經典方案是按照橫向排列的

作為一個CSS3 的新屬性，只有IE10 及以上的瀏覽器才支持column

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

怎麼定義內聯元素span的最小高度

html area圖片熱點如何使用

iframe的去邊框和無邊框有哪些操作方式

怎麼用image來提交form

以上是實現瀑布流佈局的兩個方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！