手把手帶你使用Bootstrap實現瀑布流佈局-Bootstrap教程-PHP中文網

這篇文章跟大家分享一個Bootstrap實戰，手把手帶你使用Bootstrap實現瀑布流佈局，希望對大家有幫助！

手把手帶你使用Bootstrap實現瀑布流佈局

講Bootstrap 基礎的教程網路上已經很多了，實際上Bootstrap 中文網（bootcss.com）裡的文檔已經寫的很詳細了，但實戰的案例卻不多。這裡用一些目前流行的網頁佈局為導向，使用 Bootstrap 中的樣式來完成它。每次只講與個案相關的知識點，邊學邊練，加強理解。練習本案例需有 HTML/CSS 基礎。

一、案例介紹

瀑布流是近年來流行起來的一種網頁佈局，視覺表現為參差不齊的多欄佈局，本案例便是使用Bootstrap 實現一個瀑布流佈局。【相關推薦：《bootstrap教學》】

手把手帶你使用Bootstrap實現瀑布流佈局

#二、相關的Bootstrap 知識點

2.1 設定Bootstrap

2.1.1 首先到Bootstrap 官網（bootcss.com）下載「用於生產環境的Bootstrap」。

2.1.2 在標籤內引入 CSS 資料夾內的經過壓縮的 `bootstrap.min.css`。

2.1.3 因為Bootstrap 的JS 外掛是依賴jQuery 的，所以想用他的JS 外掛必須先引入jQuery ，然後再引入JS 資料夾下的`bootstrap.min.js` 。

<!--BootstrapCSS文件，放在<head>内-->
<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]-->

登入後複製

2.2 柵格系統

官方解釋：Bootstrap 提供了一套響應式、行動裝置優先的串流柵格系統，隨著螢幕或視窗（viewport）尺寸的增加，系統會自動分成最多12 列。它包含了易於使用的預定義類別。

簡單來說，就是Bootstrap 為了快速佈局從外到內寫好了三類樣式：

.container 或100% 寬度.container-fluid 樣式；
.row 樣式，必須包含在.container 或.在 container-fluid 中；
.col-md-*（* 可以是1 到12，此處代表中等螢幕依此標準顯示，.col-md-1 佔.row 的1/12，.col-md-12 佔.row 的12 /12）或列偏移.col-md-offset-*（* 可以是1 到12），包含在.row 容器中，從而快速進行柵格佈局。

.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-* 效果圖：

手把手帶你使用Bootstrap實現瀑布流佈局

使用列偏移

.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-* 效果圖：

手把手帶你使用Bootstrap實現瀑布流佈局

另外要注意的是，不管

.col-md-* 和.col-md-offset-* 怎麼搭配使用都要保證* 總和不超過12，不然會發生斷行現象。

2.3 縮圖

縮圖最常出現的是在產品的展示頁，最常見的例如一些購物網站的商品展示。

縮圖需要配合上面所介紹的柵格系統來使用，使用方法是把

手把手帶你使用Bootstrap實現瀑布流佈局 標籤包在帶有.thumbnail 樣式的容器裡面，如果我們想要加入一段文字描述，可以在裡面新增一個樣式為.caption 的容器。

.thumbnail 範例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="img/1.jpg" alt="手把手帶你使用Bootstrap實現瀑布流佈局" >
                <div class="caption">
                    <h4>标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="img/1.jpg" alt="手把手帶你使用Bootstrap實現瀑布流佈局" >
                <div class="caption">
                    <h4>标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="img/1.jpg" alt="手把手帶你使用Bootstrap實現瀑布流佈局" >
                <div class="caption">
                    <h4>标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
    </div>
</div>

登入後複製

.thumbnail 效果圖：

手把手帶你使用Bootstrap實現瀑布流佈局

2.4響應式圖片

為了讓圖片適應容器的大小，可以為圖片加上

.img-responsive 樣式。

.img-responsive 範例：

<img src="img/1.jpg" class="img-responsive" alt="响应式图片">

登入後複製

另外也可以加入

img-rounded/img-circle/img-thumbnail 讓圖片呈現圓角/圓形/縮圖的形狀。

改變圖片形狀範例：

<!--代码部分-->
<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>

登入後複製

改變圖片形狀效果圖：

手把手帶你使用Bootstrap實現瀑布流佈局

三、瀑布流布局实战

3.1 排列图片

看完了上面的内容，下面就开始实战了。首先用栅格结构搭建一个放图片的区域，这里我们在左右各留 1/12 的空白。

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
        <!--这里放图片-->
        </div>
    </div>
</section>

登入後複製

效果图：

手把手帶你使用Bootstrap實現瀑布流佈局

然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的样式 .img-responsive 和圆角样式 .img-rounded 修饰下。

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--图片开始-->
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/1.jpg" class="img-responsive img-rounded" alt="手把手帶你使用Bootstrap實現瀑布流佈局" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</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" alt="手把手帶你使用Bootstrap實現瀑布流佈局" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</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" alt="手把手帶你使用Bootstrap實現瀑布流佈局" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

登入後複製

效果图：

手把手帶你使用Bootstrap實現瀑布流佈局

3.2 实现瀑布流

到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。

官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。

给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。

首先我们给缩略图外部的容器加一个 id="container"。

<!--代码部分-->
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="container">
        <!--图片开始-->
        <div class="col-md-4">
            <div class="thumbnail">

登入後複製

然后为这个 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; /*宽度根据实际情况调节，应与上面一致*/
    overflow:auto; /*防止内容溢出导致布局错位*/
}

登入後複製

效果图：

手把手帶你使用Bootstrap實現瀑布流佈局

因为现在主流浏览器（Chrome/Firefox/Opera/Safari）都已经支持了 CSS 变量，为了方便调试和维护，上面的 CSS 代码也可以这么写。

<!--代码部分-->
body{
    body{
    font-family:"微软雅黑";
    --img-width:354px; /*两根连词线"--"加变量名"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()里面可以放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则使用第二个参数"200px"*/
#container>div{
    width:var(--img-width);
    overflow:auto;
}

登入後複製

到这里我们的 Bootstrap 瀑布流布局就完成了，一步步完成下来还是很简单的

演示地址：https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html
源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall

3.3 扩展

除了用 CSS3 实现瀑布流之外，还可以用 JavaScript 来实现这个效果，参考代码如下。

//页面加载完之后再加载瀑布流
window.onload = function(){
    //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
    loadWaterfall(&#39;container&#39;,&#39;col-md-4&#39;);
}

//加载瀑布流函数//思路来自Amy老师
function loadWaterfall(boxID,thumbnailClass){
    //获取装缩略图外部的盒子
    var box = document.getElementById(boxID);
    //获取装缩略图的数组
    var thumbnail = box.getElementsByClassName(thumbnailClass);
    //获取每个缩略图的宽度
    var thumbnailWidth = thumbnail[0].offsetWidth;
    //计算盒子内每行可以排列几个缩略图
    var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
    //创建放每次整理好的高度数组
    var thumbnailHeightArr = [];
    for(var i = 0; i < thumbnail.length; i++){
        //获取第一行高度数组
        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 = &#39;absolute&#39;;
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + &#39;px&#39;;
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + &#39;px&#39;;
            //更新最小高度
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}

登入後複製

用 JavaScript 实现瀑布流最明显的一个好处就是对于 IE 的兼容性更好一些，因为 Windows7 捆绑安装 IE 浏览器的缘故，国内使用 IE 的群体非常庞大，这使得我们在制作网页时不得不考虑 IE 浏览器的兼容问题。

JavaScript 实现瀑布流参考源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript