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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
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超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php程序内部post数据的方法
2015/03/31 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python 性能优化技巧总结
2016/11/01 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python机器人运动范围问题的解答
2019/04/29 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
python 进程池pool使用详解
2020/10/15 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
大学总结自我鉴定
2014/01/18 职场文书
精通CAD能手自荐书
2014/01/31 职场文书
师范生自我鉴定
2014/03/20 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
2019 入党申请书范文
2019/07/10 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
Python实现聚类K-means算法详解
2022/07/15 Python