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


Posted in Javascript onJanuary 18, 2017

问题是这样的,使用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, 
 }); 
 }); 
});

最后是效果图:

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

调整浏览器大小,让图片显示成三列:

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

源码下载:http://xiazai.3water.com/201701/yuanma/bootstrappubu(3water.com).rar

参考:https://3water.com/article/103444.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
Vue中的字符串模板的使用
May 17 Javascript
原生js实现弹幕效果
Nov 29 Javascript
Ajax实现异步加载数据
Nov 17 Javascript
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
JavaScript字符串对象(string)基本用法示例
Jan 18 #Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 #Javascript
vue.js+Element实现表格里的增删改查
Jan 18 #Javascript
JS中Array数组学习总结
Jan 18 #Javascript
原生javascript实现图片放大镜效果
Jan 18 #Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 #Javascript
原生js实现回复评论功能
Jan 18 #Javascript
You might like
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php array的学习笔记
2012/05/10 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python中eval带来的潜在风险代码分析
2017/12/11 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
python3获取当前目录的实现方法
2019/07/29 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
城市精细化管理实施方案
2014/03/04 职场文书
运动会开幕词
2015/01/28 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python