bootstrap配合Masonry插件实现瀑布式布局

问题是这样的，使用bootstrap的栅格进行布局的时候，如果大小超过了，会自动的转到下一行，但是在显示图片的时候就会出现缝隙，下面介绍masonry进行缝隙的填补。

好，下面上货。

1、首先是html

<html>
<head>
 <title>Title</title>
 <meta charset="utf-8"/>
 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
 <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
 <script type="text/javascript" src="bootstrap/masonry-docs.min.js"></script>
 <script type="text/javascript" src="t.js"></script>
 <style type="text/css">
 .container-fluid {
 padding: 20px;
 }
 .box {
 margin-bottom: 20px;
 float: left;
 width: 220px;
 }
 .box img {
 max-width: 100%
 }
 </style>
</head>
<body>
<button class="btn btn-info">123</button>
<div id="masonry" class="container-fluid">
 <div class="box"><img src="img/p1.png">123</div>
 <div class="box"><img src="img/p2.png">34444444444444444444</div>
 <div class="box"><img src="img/p3.png">42234234</div>
 <div class="box"><img src="img/p4.png">234</div>
 <div class="box"><img src="img/p5.png">22222222222222</div>
 <div class="box"><img src="img/p6.png">2321213</div>
</div>
</body>
</html>

然后是t.js

$(function() {
 var $container = $('#masonry');
 $container.imagesLoaded(function() {
 $container.masonry({
 itemSelector: '.box',
 gutter: 20,
 isAnimated: true,
 });
 });
});

最后是效果图：

调整浏览器大小，让图片显示成三列：

源码下载：http://xiazai.jb51.net/201701/yuanma/bootstrappubu(jb51.net).rar

参考：http://www.jb51.net/article/103444.htm

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • BootStrap整体框架之基础布局组件

    1 基础布局组件 在12栅格系统上基础上,BootStrap还提供了多种基础布局组件. CSS组件,总结为8大类型的样式: 基础样式.颜色样式.尺寸样式.状态样式.特殊元素样式.并列元素样式.嵌套子元素样式.动画样式 1.1基础样式 基本样式,一般包含文本字体,颜色背景,边框,定位等,如下面警告框: //源码 .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px

  • Markdown+Bootstrap图片自适应属性详解

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果. 使用 Markdown 的优点 1.专注你的文字内容而不是排版样式,安心写作. 2.轻松的导出 HTML.PDF 和本身的 .md 文件.

  • bootstrap实现的自适应页面简单应用示例

    bootstrap实现的自适应页面简单应用示例

    本文实例讲述了bootstrap实现的自适应页面简单应用.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1'&g

  • Bootstrap表单布局

    Bootstrap表单布局

    Bootstrap 提供了下列类型的表单布局: •垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: •内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖排. •水平表单 -> 用栅格系统控制显示 一.垂直表单 垂直表单使用的标准步骤 1.<form> 元素添加 role="form". 2.把标签和控件放在一个带有"form-group"的<div> 中,获取最佳间距. 3.向所有的文

  • BootStrap table表格插件自适应固定表头(超好用)

    首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

  • Bootstrap页面布局基础知识全面解析

    Bootstrap页面布局基础知识全面解析

    Bootstrap作为支持响应式布局的一个前端插件,确实发挥着重要的作用,无论你是在手机,平板还是PC上浏览网页,都能达到不错的效果,这一切一切,都是bootstrap带给我们的! 今天主要说下页面的布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可缺少的东西. Bootstrap的布局是一种栅格系统,即它由行和列组成,在使用时需要为页面内容和栅格系统包裹一个

  • Markdown与Bootstrap相结合实现图片自适应属性

    先给大家说下Markdown的基本概念及优点 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. Markdown 是一种轻量级的标记语言,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被标记.语言所迷惑,Markdown 的语法十分简单.常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永

  • 使用jQuery和Bootstrap实现多层、自适应模态窗口

    使用jQuery和Bootstrap实现多层、自适应模态窗口

    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即第二层模态窗口打开的时候,无法关闭第一层模态窗口. 具体页面实现部分如下: 复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  • BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)

    布局组件 下拉按钮 <div class="dropdown"> <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown"> 帮助<span class="caret"></span> </button> <ul class="dropdown-menu" ro

  • Bootstrap 布局组件（全）

    Bootstrap 布局组件（全）

    Bootstrap 布局组件 1.Bootstrap字体图标 (1).字体图标列表链接 http://www.runoob.com/bootstrap/bootstrap-glyphicons.html (2).用法 如需使用图标,只需要简单地使用下面的代码即可.请在图标和文本之间保留适当的空间.没有glyphicon的css. <span class="glyphicon glyphicon-search"></span> (3).定制字体图标 我们已经看到如

随机推荐