实战：利用Bootstrap实现瀑布流布局（附代码）

本篇文章给大家分享一个bootstrap实战，介绍一下利用bootstrap如何一步步实现瀑布流布局，希望对大家有所帮助！
讲 bootstrap 基础的教程网上已经很多了，实际上 bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。练习本案例需有 html/css 基础。【相关推荐：《bootstrap教程》】
一、案例介绍瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使用 bootstrap 实现一个瀑布流布局。
二、相关的 bootstrap 知识点2.1 配置 bootstrap2.1.1 首先去 bootstrap 官网（bootcss.com）下载“用于生产环境的bootstrap”。2.1.2 在 93f0f5c25f18dab9d176bd4f6de5d30e 标签内引入 css 文件夹内的经过压缩的 bootstrap.min.css。2.1.3 因为 bootstrap 的 js 插件是依赖 jquery 的，所以想用他的 js 插件必须先引入 jquery ，然后再引入 js 文件夹下的 bootstrap.min.js。<link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><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><meta http-equiv="x-ua-compatible" content="ie-edge,chrome=1">
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-* 效果图：
使用列偏移 .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>  <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-* 怎么搭配使用都要保证 * 总和不超过 12，不然会发生断行现象。
2.3 缩略图缩略图最常出现的是在产品的展示页，最常见的比如一些购物网站的商品展示。
缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 <img> 标签包在带 .thumbnail 样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .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"> <h4>标题 - 缩略图</h4> <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h4>标题 - 缩略图</h4> <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small> </div> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <img src="img/1.jpg"> <div class="caption"> <h4>标题 - 缩略图</h4> <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small> </div> </div> </div> </div></div>
.thumbnail 效果图：
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>
改变图片形状效果图：
三、瀑布流布局实战3.1 排列图片看完了上面的内容，下面就开始实战了。首先用栅格结构搭建一个放图片的区域，这里我们在左右各留 1/12 的空白。
<section class="container-fluid"> <div class="row"> <div class="col-md-10 col-md-offset-1">  </div> </div></section>
效果图：
然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 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"> </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"> </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"> </a> <div class="caption"> <h4>标题 - 实战</h4> <p> <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small> </p> </div> </div> </div>  ... ... ... ... ... ...  </div> </div></section>
效果图：
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; /*防止内容溢出导致布局错位*/}
效果图：
因为现在主流浏览器（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('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; } }}
用 javascript 实现瀑布流最明显的一个好处就是对于 ie 的兼容性更好一些，因为 windows7 捆绑安装 ie 浏览器的缘故，国内使用 ie 的群体非常庞大，这使得我们在制作网页时不得不考虑 ie 浏览器的兼容问题。
javascript 实现瀑布流参考源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript
四、总结本文介绍了 bootstrap 的基本配置、栅格系统、缩略图、响应式图片和部分 css3 样式，其中栅格系统因为可以实现响应式布局尤其重要。
作者后除
原文地址：https://blog.mazey.net/2399.html
（完）
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
以上就是实战：利用bootstrap实现瀑布流布局（附代码）的详细内容。

实战：利用Bootstrap实现瀑布流布局（附代码）

推荐信息