溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了如何利用Bootstrap實(shí)現(xiàn)瀑布流布局，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
瀑布流是近幾年流行起來(lái)的一種網(wǎng)頁(yè)布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，本案例便是使用 Bootstrap 實(shí)現(xiàn)一個(gè)瀑布流布局。
<head> 標(biāo)簽內(nèi)引入 CSS 文件夾內(nèi)的經(jīng)過(guò)壓縮的 bootstrap.min.css。bootstrap.min.js。<!--BootstrapCSS文件，放在<head>內(nèi)--> <link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!--jQuery文件，引入BootstrapJS插件前必需引入--> <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--BootstrapJS文件，一般放在底部--> <script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--讓IE使用最新的渲染模式，支持CSS3--> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> <!--如果IE版本低于IE9，使瀏覽器支持HTML5和CSS3--> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
官方解釋?zhuān)築ootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多 12 列。它包含了易于使用的預(yù)定義類(lèi)。
簡(jiǎn)單來(lái)說(shuō)，就是 Bootstrap 為了快速布局從外到內(nèi)寫(xiě)好了三類(lèi)樣式：
外層的固定寬度 .container 或 100% 寬度 .container-fluid 樣式；
行 .row 樣式，必須包含在 .container 或 .container-fluid 中；
列 .col-md-*（* 可以是 1 到 12，此處代表中等屏幕按此標(biāo)準(zhǔn)顯示，.col-md-1 占 .row 的 1/12，.col-md-12 占 .row 的 12/12）或列偏移 .col-md-offset-*（* 可以是 1 到 12），包含在 .row 容器中，從而快速進(jìn)行柵格布局。
.col-md-* 示例：
<!--代碼部分--> <div class="container-fluid"> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> </div> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-3">3/12</div> <div class="col-md-4">4/12</div> <div class="col-md-4">4/12</div> </div> <div class="row"> <div class="col-md-6">6/12</div> <div class="col-md-6">6/12</div> </div> </div>
.col-md-* 效果圖：
使用列偏移 .col-md-offset-* 示例：
<!--代碼部分--> <div class="container-fluid"> <div class="row"> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <!--這里向右偏移4/12--> <div class="col-md-1 col-md-offset-4">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> <div class="col-md-1">1/12</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-1">3/12</div> <div class="col-md-4 col-md-offset-4">4/12</div> </div> <div class="row"> <div class="col-md-4 col-md-offset-4">6/12</div> </div> </div>
.col-md-offset-* 效果圖：
另外需要注意的是，不管 .col-md-* 和 .col-md-offset-* 怎么搭配使用都要保證 * 總和不超過(guò) 12，不然會(huì)發(fā)生斷行現(xiàn)象。
縮略圖最常出現(xiàn)的是在產(chǎn)品的展示頁(yè)，最常見(jiàn)的比如一些購(gòu)物網(wǎng)站的商品展示。
縮略圖需要配合上面所介紹的柵格系統(tǒng)來(lái)使用，使用方法是把 <img> 標(biāo)簽包在帶 .thumbnail 樣式的容器里面，如果我們想添加一段文字描述，可以在里面添加一個(gè)樣式為 .caption 的容器。
.thumbnail 示例：
<!--代碼部分--> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h5>標(biāo)題 - 縮略圖</h5> <small>我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h5>標(biāo)題 - 縮略圖</h5> <small>我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h5>標(biāo)題 - 縮略圖</h5> <small>我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述，我是縮略圖里面的描述。</small> </div> </div> </div> </div> </div>
.thumbnail 效果圖：
為了讓圖片適應(yīng)容器的大小，可以為圖片添加 .img-responsive 樣式。
.img-responsive 示例：
<img src="img/1.jpg" class="img-responsive" alt="響應(yīng)式圖片">
另外還可以添加 img-rounded/img-circle/img-thumbnail 讓圖片呈現(xiàn)圓角/圓形/縮略圖的形狀。
改變圖片形狀示例：
<!--代碼部分--> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <img src="img/1.jpg" class="img-responsive img-rounded" alt="圓角"> </div> <div class="col-md-4"> <img src="img/1.jpg" class="img-responsive img-circle" alt="圓形"> </div> <div class="col-md-4"> <img src="img/1.jpg" class="img-responsive img-thumbnail" alt="縮略圖"> </div> </div> </div>
改變圖片形狀效果圖：
看完了上面的內(nèi)容，下面就開(kāi)始實(shí)戰(zhàn)了。首先用柵格結(jié)構(gòu)搭建一個(gè)放圖片的區(qū)域，這里我們?cè)谧笥腋髁?1/12 的空白。
<!--代碼部分--> <section class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!--這里放圖片--> </div> </div> </section>
效果圖：
然后用上面所看到的帶描述的縮略圖樣式，每個(gè)縮略圖又占這中間 10/12（看作一個(gè)整體）的 4/12，每行放三個(gè)縮略圖，放三行?？s略圖里的圖片用響應(yīng)式圖片的樣式 .img-responsive 和圓角樣式 .img-rounded 修飾下。
<!--代碼部分--> <section class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <!--圖片開(kāi)始--> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);"> <img src="img/1.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> <h5>標(biāo)題 - 實(shí)戰(zhàn)</h5> <p> <small>閱讀是運(yùn)用語(yǔ)言文字來(lái)獲取信息，認(rèn)識(shí)世界，發(fā)展思維，并獲得審美體驗(yàn)的活動(dòng)。它是從視覺(jué)材料中獲取信息的過(guò)程。視覺(jué)材料主要是文字和圖片，也包括符號(hào)、公式、圖表等。</small> </p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);"> <img src="img/2.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> <h5>標(biāo)題 - 實(shí)戰(zhàn)</h5> <p> <small>閱讀是運(yùn)用語(yǔ)言文字來(lái)獲取信息，認(rèn)識(shí)世界，發(fā)展思維，并獲得審美體驗(yàn)的活動(dòng)。它是從視覺(jué)材料中獲取信息的過(guò)程。視覺(jué)材料主要是文字和圖片，也包括符號(hào)、公式、圖表等。</small> </p> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a href="javascript:void(0);"> <img src="img/3.jpg" class="img-responsive img-rounded"> </a> <div class="caption"> <h5>標(biāo)題 - 實(shí)戰(zhàn)</h5> <p> <small>閱讀是運(yùn)用語(yǔ)言文字來(lái)獲取信息，認(rèn)識(shí)世界，發(fā)展思維，并獲得審美體驗(yàn)的活動(dòng)。它是從視覺(jué)材料中獲取信息的過(guò)程。視覺(jué)材料主要是文字和圖片，也包括符號(hào)、公式、圖表等。</small> </p> </div> </div> </div> <!--第四到第九個(gè)縮略圖--> ... ... ... ... ... ... <!--圖片結(jié)束--> </div> </div> </section>
效果圖：
到這里已經(jīng)把圖片排列好了，但是看起來(lái)怪怪的，因?yàn)樯舷聢D片之間有一片空隙，看起來(lái)很不美觀，我們的瀑布流的特點(diǎn)是寬度一致，高度自適應(yīng)布局。目前已經(jīng)實(shí)現(xiàn)了寬度一致，要想實(shí)現(xiàn)高度自適應(yīng)要用到 CSS3 中的一個(gè)樣式 column-width。
官方解釋?zhuān)涸O(shè)置或檢索對(duì)象每列的寬度，對(duì)應(yīng)的腳本特性為 columnWidth。
給容器加了 column-width 這個(gè)樣式時(shí)，瀏覽器會(huì)給你計(jì)算容器里面的 <div> 應(yīng)該顯示多少列，計(jì)算一個(gè)相對(duì)合理的布局方式。
首先我們給縮略圖外部的容器加一個(gè) id="container"。
<!--代碼部分--> <div class="row"> <div class="col-md-10 col-md-offset-1" id="container"> <!--圖片開(kāi)始--> <div class="col-md-4"> <div class="thumbnail">
然后為這個(gè) id 加上 column-width 樣式。
<!--代碼部分-->
#container{
-webkit-column-width:354px; /*Safari and Chrome*/
-moz-column-width:354px; /*Firefox*/
-o-column-width:354px; /*Opera*/
-ms-column-width:354px; /*IE*/
column-width:354px;
}
#container>div{
width:354px; /*寬度根據(jù)實(shí)際情況調(diào)節(jié)，應(yīng)與上面一致*/
overflow:auto; /*防止內(nèi)容溢出導(dǎo)致布局錯(cuò)位*/
}效果圖：
因?yàn)楝F(xiàn)在主流瀏覽器（Chrome/Firefox/Opera/Safari）都已經(jīng)支持了 CSS 變量，為了方便調(diào)試和維護(hù)，上面的 CSS 代碼也可以這么寫(xiě)。
<!--代碼部分-->
body{
body{
font-family:"微軟雅黑";
--img-width:354px; /*兩根連詞線(xiàn)"--"加變量名"img-width"聲明變量*/
}
#container{
-webkit-column-width:var(--img-width); /*用"var(--變量名)"使用變量*/
-moz-column-width:var(--img-width);
-o-column-width:var(--img-width);
-ms-column-width:var(--img-width);
column-width:var(--img-width);
}
/*另：var()里面可以放第二個(gè)參數(shù)，在變量不存在時(shí)取第二個(gè)值，例如var(--img-width,200px)中，如果"--img-width"不存在則使用第二個(gè)參數(shù)"200px"*/
#container>div{
width:var(--img-width);
overflow:auto;
}到這里我們的 Bootstrap 瀑布流布局就完成了，一步步完成下來(lái)還是很簡(jiǎn)單的
演示地址：https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html
源碼地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall
除了用 CSS3 實(shí)現(xiàn)瀑布流之外，還可以用 JavaScript 來(lái)實(shí)現(xiàn)這個(gè)效果，參考代碼如下。
//頁(yè)面加載完之后再加載瀑布流
window.onload = function(){
//這里引用col-md-4是因?yàn)樵诤凶永锇鼒D片沒(méi)有其他作用，如果不想沖突也可以創(chuàng)建其他Class
loadWaterfall('container','col-md-4');
}
//加載瀑布流函數(shù)//思路來(lái)自Amy老師
function loadWaterfall(boxID,thumbnailClass){
//獲取裝縮略圖外部的盒子
var box = document.getElementById(boxID);
//獲取裝縮略圖的數(shù)組
var thumbnail = box.getElementsByClassName(thumbnailClass);
//獲取每個(gè)縮略圖的寬度
var thumbnailWidth = thumbnail[0].offsetWidth;
//計(jì)算盒子內(nèi)每行可以排列幾個(gè)縮略圖
var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
//創(chuàng)建放每次整理好的高度數(shù)組
var thumbnailHeightArr = [];
for(var i = 0; i < thumbnail.length; i++){
//獲取第一行高度數(shù)組
if(i < colCount){
thumbnailHeightArr.push(thumbnail[i].offsetHeight);
}else{
//獲取之前最小高度
var minHeight = Math.min.apply(null,thumbnailHeightArr);
//第一行最小高度索引
var minIndex = thumbnailHeightArr.indexOf(minHeight);
//將此縮略圖放在上面那行最小高度下面
thumbnail[i].style.position = 'absolute';
//距離頂部長(zhǎng)度為這個(gè)縮略圖上面那個(gè)縮略圖的長(zhǎng)度
thumbnail[i].style.top = minHeight + 'px';
//距離左邊長(zhǎng)度為這個(gè)縮略圖上面那個(gè)縮略圖距離左邊的長(zhǎng)度
thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + 'px';
//更新最小高度
thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
}
}
}用 JavaScript 實(shí)現(xiàn)瀑布流最明顯的一個(gè)好處就是對(duì)于 IE 的兼容性更好一些，因?yàn)?Windows7 捆綁安裝 IE 瀏覽器的緣故，國(guó)內(nèi)使用 IE 的群體非常龐大，這使得我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)不得不考慮 IE 瀏覽器的兼容問(wèn)題。
JavaScript 實(shí)現(xiàn)瀑布流參考源碼地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何利用Bootstrap實(shí)現(xiàn)瀑布流布局”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼