手把手带你使用Bootstrap实现瀑布流布局

讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 HTML/CSS 基础。

一、案例介绍

瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使用 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。

<script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.2 栅格系统

简单来说，就是 Bootstrap 为了快速布局从外到内写好了三类样式：

.col-md-*示例：

    
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
    
    
        
1/12
        
3/12
        
4/12
        
4/12
    
    
        
6/12
        
6/12
    

.col-md-*效果图：

使用列偏移 .col-md-offset-*示例：

    
        
1/12
        
1/12
                
1/12
        
1/12
        
1/12
        
1/12
        
1/12
        
1/12
    
    
        
3/12
        
4/12
    
    
        
6/12
    

.col-md-offset-*效果图：

另外需要注意的是，不管 .col-md-*和 .col-md-offset-*怎么搭配使用都要保证 *总和不超过 12，不然会发生断行现象。

2.3 缩略图

缩略图最常出现的是在产品的展示页，最常见的比如一些购物网站的商品展示。

缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 标签包在带 .thumbnail样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .caption的容器。

.thumbnail示例：

    
        
            
                                
                    
标题 - 缩略图
                    我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。                
            
        
        
            
                                
                    
标题 - 缩略图
                    我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。                
            
        
        
            
                                
                    
标题 - 缩略图
                    我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。                
            
        
    

.thumbnail效果图：

2.4 响应式图片

为了让图片适应容器的大小，可以为图片添加 .img-responsive样式。

.img-responsive示例：

另外还可以添加 img-rounded/img-circle/img-thumbnail让图片呈现圆角/圆形/缩略图的形状。

改变图片形状示例：

改变图片形状效果图：

三、瀑布流布局实战

3.1 排列图片

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

效果图：

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

    
        
                        
                
                                                                                    
                        
标题 - 实战
                        
                            阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。                        
                    
                 
            
            
                
                                                                                    
                        
标题 - 实战
                        
                            阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。                        
                    
                 
            
            
                
                                                                                    
                        
标题 - 实战
                        
                            阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。                        
                    
                 
            
                        ...            ...            ...            ...            ...            ...                    
    

效果图：

3.2 实现瀑布流

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

给容器加了 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; /*防止内容溢出导致布局错位*/}

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;}

//页面加载完之后再加载瀑布流window.onload = function(){    //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class    loadWaterfall("container","col-md-4");}//加载瀑布流函数//思路来自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 = "absolute";            //距离顶部长度为这个缩略图上面那个缩略图的长度            thumbnail[i].style.top = minHeight + "px";            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + "px";            //更新最小高度            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;        }    }}