【Web:Bootstrap框架】简单实现理解

希望这篇博客可以让你了解什么是Bootstrap框架框架及其使用，感谢阅读！

Bootstrap

1.Bootstrap框架
2.Bootstrap案例
- 2.1 导入Bootstrap框架
- 2.2 用模板第一个bootstrap页面
- 2.3 全局css样式
- 2.4 组件
- 2.5 响应式布局
- 2.6 栅格系统
- 2.6 响应式栅格系统
- - 2.6.1 响应式设备
  - 2.6.2 响应式图片
  - 2.6.3 响应式组件
3. 实现案例

1.Bootstrap框架

Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴

2.Bootstrap案例

案例：结合Bootstrap框架，实现如下页面
说明：这里我们先做这个页面，后面学习到servlet后，我会写一篇我们自己实现一个简易网页的博客，而这张页面就是我们的封面

划分页面：

我们在实现页面前，肯定要大致了解和划分页面，我们页面最上面是一个：搜索栏；搜索栏下面是一个：轮播图（图片自动切换）；搜索栏下面左下是一个瀑布流，搜索栏右下是两个相同的展示框！

在实现上面案例之前，我们先来了解了解Bootstrap框架使用及给提供的一些样式和组件

2.1 导入Bootstrap框架

1、下载链接

链接：https://pan.baidu.com/s/1jRlbVPW72woloqlo-U9Prg  提取码：4897

下载完成后，解压打开文件夹：

然后你的目录下会多出：bootstrap3文件夹，这个文件下的文件我们不需要去动它，这些都是bootstrap框架的内部包，都是实现Bootstrap框架所需的一些东西
还会多出一个template文件夹，我们可以看到这个文件下有两个文件，一个是:starter.html；一个是：template.html;template是模板的意思，由于页面要用到Bootstrap3，这个Bootstrap框架，那template.html就是对页面进行设置，还要引入相应的文件

template.html：
template.html就是一个模板页面，我们在使用Bootstrap3做页面的时候，现在有现成的页面：template.html，我们要做的就是复制粘贴模板框架，然后根据我们的业务去更改框架的实现部分，但这个模板有很多注释，粘贴不便，所以template文件夹下的starter.html的去掉了template.html的注释，方便我们使用！

下面，让我们练练手，熟悉熟悉

2.2 用模板第一个bootstrap页面

1、复制 template文件夹下的starter.html 粘贴到你自己文件夹后改名字！
说明： 以下所有的练习栗子，我们都是这样做的，复制 template文件夹下的starter.html 然后粘贴，这就是自己的模板，我们都是在自己的模板下练习的！

starter.html ：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Template</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>Bootstrap 模版
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
</html>

怎么验证你的框架是否引入成功，在bod里面添加两个div如下：

运行结果如下就成功了，框架是没有问题的！
我们来简单说下这个工作原理啊：我们给上面 div2添加一个了效果：有高度，背景颜色，有边框，有圆角，有内边距等一堆的样式，而我们这里只需要添加一个class="well"；这个 class 就是为Bootstrap框架类选择器而工作的，Bootstrap框架根据这个class类选择器找到页面中元素，然后把 well 这个样式效果实现当前元素上
像上面的 class 添加的样式效果，Bootstrap框架可能有成千多个，我们不需要去背，我们只需要学会查看文档，然后拿过来用就好了：Bootstrap框架中文文档
界面如下：

我们能用到的就是：全局CSS样式和组件

全局CSS样式: 是对HTML中现有的一些标签做了重新的定义,包括:按钮/图片/表单等页面元素
组件: 多个页面元素的组合称为组件

下面我们来用用，试试手

2.3 全局css样式

全局 CSS 样式
设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统

栗子：
我们来打开Bootstrap框架中文文档，点击全局css样式，选择右侧的：按钮如下：

按钮样式：

我们来使用下Bootstrap框架给我们提供的按钮及样式，复制粘贴上述代码，到我们的模板下body里面：

<h3>"可作为按钮使用的标签"</h3>
<a class="btn btn-default" href="">按钮1</a>
<input class="btn btn-default" type="button" value="按钮2">
<input class="btn btn-default" type="submit" value="按钮3">
<button class="btn btn-default">按钮4</button>
<br>
<a class="btn btn-danger" href="">按钮1</a>
<input class="btn btn-primary" type="button" value="按钮2">
<input class="btn btn-success" type="submit" value="按钮3">
<button class="btn btn-warning">按钮4</button>
<br>
<a class="btn btn-danger btn-lg" href="">按钮1</a>
<input class="btn btn-primary btn-sm" type="button" value="按钮2">
<input class="btn btn-success" type="submit" value="按钮3">
<button class="btn btn-warning btn-xs">按钮4</button>
</body>

运行如下：

2.4 组件

组件
无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能

下面我以字体图标为栗,为什么叫字体图标呢，因为图标的大小是跟随字体大小动态变化的：

我们来打开Bootstrap框架中文文档，选择上面的：组件如下：

怎么用，在我们的模板页面写一个 行内元素； 然后把你要用的图标下的代码粘贴复制到你的行内元素，下面我以 span这个行内元素为栗：

运行结果：

虽然结果是出来了，但是不美观，因为图标和我们行内元素的文本部分没有对齐，因为这个字体图标对我们中文的支持不是很好，下面介绍另一个字体图标：
1、点击：Font Awesome 中文网
2、点击图标库

3、点击你想使用的图标

4、看到使用方法，我们需要的就是复制粘贴：class=“xxxx”，这部分到我们的行内元素里面

那我们随便找一个图标来测试一下，这里我还是用：span 行内元素

运行结果：

下面我们来说说响应式布局

2.5 响应式布局

响应式布局：根据不同的设备显示不同的样式。通俗点：访问网站的时候，我们可以手机访问，也可以用电脑、平板访问，那这个网站就要根据我们访问设备的不同来给用户对应的页面大小！

1、我们来打开Bootstrap框架中文文档，选择上面的：全局CSS样式，选择右侧的栅栏系统：

2、向下找到：媒体查询

媒体查询：是Bootstrap框架中实现响应式布局的实现方式
怎么实现呢？
上面图中已经把实现方式和参数都给了，我们需要做的就是复制粘贴上面框中的四行代码到我们的模板中，写上对应的参数就好

3、在我们模板 head标签里面加上：style便签，把复制的上述四行代码粘贴进来，写上对应参数

运行结果：
大家自己运行，改变窗口大小，就会发现窗口改变，窗口颜色样式也会改变！

2.6 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局

1、我们来打开Bootstrap框架中文文档，选择上面的：全局CSS样式，下拉找到栅格系统
2、实例：几种效果

3、实现上述效果的代码

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
container： 内容居中

我们写个栗子来看看，还是写在自己的Bootstrap中，如下：

  <style>div>div{border: 1px solid red;}</style>
</head>
<body>
<!--创建一行两等份-->
<div class="row"><div class="col-md-6">占6列</div><div class="col-md-6" >占6列</div>
</div>
<!--创建一行三等份-->
<div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div>
</div>
<!--container：内容居中-->
<div class="container"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div>
</div>
<!--列偏移 如果以一行列数不足12列的时候，就可能用到列偏移-->
<div class="row"><div class="col-md-8 col-md-offset-2">占8列</div>
</div>
</body>

运行结果：

说明：container就是让内容相对于窗口长度是居中的，那也就是窗口不论怎么变化，加了container元素内容始终是居中的；列偏移就是当一行列数不足12列时，我们可以让此行列偏移指定列数

2.6 响应式栅格系统

2.6.1 响应式设备

栅格参数：

我们可以根据上面的不同设备的参数，来自定义不同设备下一行显示的元素个数：

div里面的练习写在我们模板的body里面

<div class="row"><!--中等显示器一行6个 pad显示4个  手机显示2个--><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div><div class="col-md-2 col-sm-3 col-xs-6">刘德华</div>
</div>

运行结果：大家自己改变窗口的大小，中等显示器一行6个 pad显示4个手机显示2个

下面我们来说说响应式图片，大家自己先找一个图片，放在和自己模板同目录下

2.6.2 响应式图片

我们来打开Bootstrap框架中文文档，选择上面的：全局CSS样式，下拉找到：响应式图片

1、响应式图片：在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放
用法：<img src="..." class="img-responsive" alt="Responsive image">
2、Bootstrap 版本 3 中还给我们提供了图片样式，我们一起开看看

用法：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

栗子：
div里面的练习写在我们模板的body里面

<div class="row"><!--响应式图片--><div class="col-md-3 col-sm-6" ><img src="1.jpg" class="img-responsive img-rounded" alt=""></div><div class="col-md-3 col-sm-6"><img src="1.jpg" class="img-responsive img-circle" alt=""></div><div class="col-md-3 col-sm-6"><img src="1.jpg" class="img-responsive img-circle" alt=""></div><div class="col-md-3 col-sm-6"><img src="1.jpg" class="img-responsive img-thumbnail" alt=""></div>
</div>

运行结果：
大家自己改变窗口大小，来感受响应式图片及其样式

2.6.3 响应式组件

我们来打开Bootstrap框架中文文档，选择上面的：组件，右侧找到：缩略图

Bootstrap 版本 3 中给我们提供了两种缩略图样式：默认样式和自定义样式，下面我们分别看看

1、默认样式

实现：

<div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="..." alt="..."></a></div>...
</div>

2、自定义样式

实现：

<div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="..." alt="..."><div class="caption"><h3>Thumbnail label</h3><p>...</p><p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p></div></div></div>
</div>

栗子：我们把上面的两端代码复制粘贴到我们模板中的 body里面，然后稍作修改，换成我们自己的图片：

<h3>缩略图组件</h3>
<div class="row"><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="1.jpg" alt="..."></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="1.jpg" alt="..."></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="1.jpg" alt="..."></a></div><div class="col-xs-6 col-md-3"><a href="#" class="thumbnail"><img src="1.jpg" alt="..."></a></div>
</div>
<h3>自定义缩略图</h3>
<div class="row"><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="1.jpg" alt="..."><div class="caption"><h3>小姐姐</h3><p>暮光之城女主</p><p><a href="#" class="btn btn-primary" role="button">点赞</a><a href="#" class="btn btn-default" role="button">收藏</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="1.jpg" alt="..."><div class="caption"><h3>小姐姐</h3><p>暮光之城女主</p><p><a href="#" class="btn btn-primary" role="button">点赞</a><a href="#" class="btn btn-default" role="button">收藏</a></p></div></div></div><div class="col-sm-6 col-md-4"><div class="thumbnail"><img src="1.jpg" alt="..."><div class="caption"><h3>小姐姐</h3><p>暮光之城女主</p><p><a href="#" class="btn btn-primary" role="button">点赞</a><a href="#" class="btn btn-default" role="button">收藏</a></p></div></div></div>
</div>

运行结果：

综上Bootstrap框架框架就介绍到这里，Bootstrap框架就是把常用的样式给我们封装起来，方便使用，下面我们开始利用上面的这些知识来实现案例页面

3. 实现案例

大家准备好大概10多张图片，我们会用到!
这是我们实现页面需要的素材图片，大家下载后，导入实现页面的目录下：

链接：https://pan.baidu.com/s/1bT-3JO5Yt6zXvYlfM4CTBg
提取码：1826

1、创建
还是先创建模板：复制template文件夹下的starter.html，粘贴到我们的目录下，然后改名字

xxx.html:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Bootstrap Template</title><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
<!--Bootstrap 模版-->
</body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
</html>

2、代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Bootstrap Template</title><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--在webapp下添加bts.css文件  然后把                            底下这个也换成：bt3--><link rel="stylesheet" type="text/css" href="../bootstrap3/css/bt3.css"><link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/><style>body {background-color: #2e2e2e;}/*给导航条设置颜色*/.navbar {background-color: black;border: none; /*去掉边框*/margin-top: 10px;}/*鼠标移入颜色*/.nav.navbar-nav > li > a:hover {color: #ffc600;}.navbar-brand > img {position: relative; /*相对定位*/bottom: 12px;}form > input {background-color: #383838;color: #a9a8a8;padding: 10px 20px;height: 30px;border-radius: 30px;border: none;position: relative;top: 10px;outline: none; /*去掉点击后的边框*/}form > button {background-color: rgba(0, 0, 0, 0);border: none;color: gray;position: relative;top: 10px;right: 40px;}/*添加瀑布流样式*/.grid-item{width: 200px;/*设置每个元素的宽度为：200px*/margin: 0 10px 10px 0;}/*浏览最多样式*/.list-group-item{background-color: black;color: #ffc600;border: none;}.list-head{background-color: #ffc600;color: black;}/*给轮播图添加下外边距*/#myCarousel{margin-bottom: 10px;}.well{background-color: black;border: none;color: #ffc600;font-weight: bold;text-align: center;}</style>
</head>
<body>
<!--添加头部，内容居中 -->
<header class="container"><!--添加导航条--><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="#"><img alt="Brand" src="data:images/logo.png"></a></div><!--分类列表--><ul class="nav navbar-nav"><li><a href="">首页</a></li><li><a href="">手绘</a></li><li><a href="">次时代</a></li><li><a href="">雕刻</a></li><li><a href="">室内设计</a></li><li><a href="">地图编辑</a></li><li><form action=""><input type="text" placeholder="Search"><button type="submit"><span class="fa fa-search"></span></button></form></li></ul><!--右侧列表--><ul class="nav navbar-nav navbar-right"><li><a href="">管理员入口</a></li></ul></div></nav>
</header><section class="container"><!--轮播图开始--><div id="myCarousel" class="carousel slide"><!-- 轮播（Carousel）指标 --><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li></ol><!-- 轮播（Carousel）项目 --><div class="carousel-inner"><div class="item active"><img src="data:images/banner0.jpg" alt="First slide"><div class="carousel-caption"></div></div><div class="item"><img src="data:images/banner1.jpg" alt="Second slide"><div class="carousel-caption"></div></div><div class="item"><img src="data:images/banner2.jpg" alt="Third slide"><div class="carousel-caption"></div></div></div><!-- 轮播（Carousel）导航 --><a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><!--轮播图结束--><!--创建一行 3：1--><div class="row"><div class="col-md-9"><!--左侧：瀑布流--><!--瀑布流开始--><div class="grid"><div class="grid-item"><a href=""><img class="img-responsive" src="1.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="2.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="3.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="1.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="4.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="2.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="5.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="3.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="5.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="4.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="2.jpg" alt=""></a></div><div class="grid-item"><a href=""><img class="img-responsive" src="1.jpg" alt=""></a></div></div><!--瀑布流结束--></div><div class="col-md-3"><!--浏览最多开始--><ul class="list-group">        <!--自定义头部:list-head--><li class="list-group-item list-head"><h4><span class="fa fa-eye">浏览最多</span></h4></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="1.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="2.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="3.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="4.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li></ul><!--浏览最多结束--><!--最受欢迎开始--><ul class="list-group">        <!--自定义头部:list-head--><li class="list-group-item list-head"><h4><span class="fa fa-thumbs-o-up">最受欢迎</span></h4></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="5.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="2.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="1.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li><li class="list-group-item"><!-- 左对齐 --><div class="media"><div class="media-left"><img src="3.jpg" class="media-object" style="width:60px;height: 50px"></div><div class="media-body"><h4 class="media-heading">左对齐</h4><p>这是一些示例文本...</p></div></div></li></ul><!--最受欢迎结束--></div></div>
</section>
<!--脚-->
<footer class="container"><div class="well">Copyright @ 2020 vrd.net.cn 京ICP备16053980号-5<!--pull-right:效果类似于 float：right--><span class="pull-right">Version 0.1.0</span></div>
</footer></body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
<!--引入和瀑布流相关的文件-->
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script><script>/*让上面的轮播图动起来*/$('#myCarousel').carousel('cycle')/*瀑布流初始化代码*/$(".grid").masonry({itemSelector:".grid-item",//告诉框架 选择器是什么columnWidth:210//告诉框架 每个元素占得宽度(元素宽度+间距)})//图片加载完之后，让瀑布流处理一下显示布局$(".grid").imagesLoaded().process(function () {//此处代码图片完之后会执行$(".grid").masonry("layout");//让瀑布重新计算显示效果})
</script></html>

完成！