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 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
js类型检查实现代码
Oct 29 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
vue中多个倒计时实现代码实例
Mar 27 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP 常见郁闷问题答解
2006/11/25 PHP
php 远程关机操作的代码
2008/12/05 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
php简单防盗链实现方法
2015/07/29 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
python 遍历列表提取下标和值的实例
2018/12/25 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
《社戏》教学反思
2014/04/15 职场文书
经济管理专业求职信
2014/06/09 职场文书
销售口号大全
2014/06/11 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
会计做账心得体会
2016/01/22 职场文书