bootstrap配合Masonry插件实现瀑布式布局
来源:互联网 发布:cad网络拓扑图下载 编辑:程序博客网 时间:2024/05/17 12:48
bootstrap配合Masonry插件实现瀑布式布局
本文主要参考:
http://www.jq22.com/jquery-info362
问题是这样的,使用bootstrap的栅格进行布局的时候,如果大小超过了,会自动的转到下一行,但是在显示图片的时候就会出现缝隙,下面介绍masonry进行缝隙的填补。
好,下面上货。
1、首先是html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><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, }); });});
最后是效果图:
调整浏览器大小,让图片显示成三列:
下面是源码:
点我下载,不要你的积分哦!!!
0 0
- bootstrap配合Masonry插件实现瀑布式布局
- 瀑布式布局实现
- Query瀑布流插件 Masonry
- jQuery瀑布流插件 Masonry
- Masonry瀑布流式布局库(中文翻译)
- bootstrap+masonry.js写瀑布流
- Masonry实现JS瀑布流
- Masonry实现瀑布流布局
- masonry 瀑布流布局插件使用说明
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
- 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
- 用Masonry和jQuery.lazyload插件实现网页瀑布流布局
- 关于ajax刷新后破坏瀑布流式布局jquery+masonry的一点想法
- avalon搭配masonry实现MVVM瀑布流
- Masonry + Ajax 实现无限刷新瀑布流
- js 实现瀑布流式布局
- bootstrap瀑布流+前端布局生成
- 网页前端瀑布流布局效果Jquery插件“Masonry”
- 线性规划与网络流24——太空飞行计划问题
- flex-shrink
- 获取两日期相差年月日周时分秒(笔记)
- Python3下AttributeError: 'dict' object has no attribute 'iteritems'的问题分析
- C语言指针学多了,你为什么会觉得晕?
- bootstrap配合Masonry插件实现瀑布式布局
- java中getter 和 setter 方法有什么意义?为什么不用public代替GS?
- log4j2自己使用配置
- 数据流图的画法
- Windows 蓝牙外发文件拦截
- sync_binlog innodb_flush_log_at_trx_commit 浅析
- Java NIO与IO的详细区别(通俗篇)
- JavaSE_3th_方法的重载
- hdu 1686 Oulipo(KMP)