bootstrap配合Masonry插件实现瀑布式布局
更新时间：2017年01月18日 14:36:46 作者：0day__
这篇文章主要为大家详细介绍了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
参考：https://www.jb51.net/article/103444.htm
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
js+FSO遍历文件夹下文件并显示...2007-03-03
这篇文章主要介绍了js图片轮播特效，图片切换效果特别适合做产品演示，感兴趣的小伙伴可以参考下2015-09-09
这篇文章主要介绍了javascript动态设置样式style的方法,实例分析了javascript操作style样式的易错点和相关使用技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JS遍历树层级关系实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
TreeView 用法，后台结合asp.net需要的朋友可以参考下。2011-07-07
基于JQuery+HTML+JavaScript实现地图位置选取和地址模糊查询
本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能,本文逐步展示了如何构建基本的地图页面,如何通过点击地图获取经纬度和地理信息,以及如何实现模糊查询地址并在地图上标注,感兴趣的小伙伴跟着小编一起来看看吧2024-07-07
这篇文章主要介绍了JavaScript 截取字符串代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
在web开发中，防止表单的重复提交是一个非常重要的环节。重复提交会导致数据混乱，甚至可能导致系统崩溃，今天我们将带领大家从小白级别到大神级别的程序员，一起来学习如何在实际项目中避免表单的重复提交2023-04-04
javascript禁制后退键(Backspace)实例代码
这篇文章介绍了javascript禁制后退键(Backspace)实例代码，有需要的朋友可以参考一下2013-11-11
clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件，本文就详细的介绍一下如何使用，感兴趣的可以了解一下2021-11-11
最新评论