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实现一些常用软件的下载导航
Aug 03 Javascript
json原理分析及实例介绍
Nov 29 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Python字符转换
2008/09/06 Python
python中关于日期时间处理的问答集锦
2013/03/08 Python
django表单的Widgets使用详解
2019/07/22 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python运行DLL文件的方法
2020/01/17 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
实体的生命周期
2013/08/31 面试题
this关键字的作用
2016/01/30 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
单位提档介绍信
2014/01/17 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
家长通知书家长评语
2014/04/17 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
运输公司工作总结
2015/08/11 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL