小編給大家分享一下web開發(fā)中實現(xiàn)瀑布流布局的方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比友誼網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式友誼網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋友誼地區(qū)。費用合理售后完善，十余年實體公司更值得信賴。

瀑布流布局是一個之前挺火，現(xiàn)在也比較常見的一種布局

這種看起來參差不齊的多欄布局，重點在于每個元素等寬不等高，一般圖片網(wǎng)站應(yīng)用較多

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

Pinterest、花瓣網(wǎng)都是比較成熟的采用瀑布流布局的網(wǎng)站

效果圖：

一、經(jīng)典套路： JavaScript + 絕對定位

HTML 結(jié)構(gòu)：

<div id="main">
  ...  <div class="box">
    <div class="wrapper">
      <div class="pic"><img src="" /></div>
      <div class="text">簡單介紹</div>
    </div>
  </div>
  ...</div>

整個瀑布流區(qū)域用一個 <div id="main"> 作為父容器

瀑布流中的每個數(shù)據(jù)塊用 .box 作為基本布局， .wrapper 呈現(xiàn)樣式和實際內(nèi)容

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; /*限定數(shù)據(jù)塊的寬度*/}.wrapper {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}.pic {
  font-size: 0; /*消除行內(nèi)元素的間隙*/}.pic img {
  width: 100%;
  height: auto;
}.text {
  color: #999;
  background: #FAFAFA;
  font-size: 14px;
  padding-top: 5px;
}

在 .box 中設(shè)置了 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; //獲取每個數(shù)據(jù)塊的寬度
  var mainWidh = main.offsetWidth; //獲取主容器的寬度
  var cols = Math.floor(mainWidh / boxWidth); //計算列數(shù)
  
  var heightArr = []; //定義一個存放 top 值的數(shù)組
  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 = '0px'; 
        boxs[i].style.left = i * boxWidth +'px';
      } else {        //求出最矮盒子的高度
        var minBoxHeight = Math.min.apply(this, heightArr); 
        //求出最矮盒子的索引 
        var minBoxIndex = getIndex(minBoxHeight, heightArr); 
        boxs[i].style.top = minBoxHeight + 'px'; //頂部間距即最矮盒子的高度
        boxs[i].style.left = minBoxIndex * boxWidth +'px'; 
        //關(guān)鍵:更新最矮盒子的高度
        heightArr[minBoxIndex] += boxHeight;
      } 
  }
}
function getIndex(val, arr) {  for(var i in arr) {    if(val == arr[i]) {      return i;
    }
  }
}

這種方案一開始給 .box 設(shè)置了 position: absolute;

所以在打開頁面的時候，如果頁面性能較差，可能會出現(xiàn)所有數(shù)據(jù)塊堆疊在一起的情況

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

二、純 CSS3 實現(xiàn)瀑布流

CSS3 中新增了一個屬性 column，可以通過規(guī)定列數(shù) column-count，讓瀏覽器自適應(yīng)布局

只需要刪除上面的 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;
}

但通過這種方式實現(xiàn)的瀑布流，實際上是按照縱向排列的，而之前的經(jīng)典方案是按照橫向排列的

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

以上是web開發(fā)中實現(xiàn)瀑布流布局的方法有哪些的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：web開發(fā)中實現(xiàn)瀑布流布局的方法有哪些
URL鏈接：http://chinadenli.net/article12/geoegc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、域名注冊、電子商務(wù)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)