bootstrap配合Masonry插件实现瀑布式布局       这篇文章主要为大家详细介绍了bootstrap配合Masonry插件实现瀑布式布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

问题是这样的，使用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 123 /button 
 div id="masonry" 
 div img src="img/p1.png" 123 /div 
 div img src="img/p2.png"  /div 
 div img src="img/p3.png"  /div 
 div img src="img/p4.png" 234 /div 
 div img src="img/p5.png" 22 /div 
 div 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, 
 }); 
 }); 

最后是效果图：

调整浏览器大小，让图片显示成三列：

源码下载：

参考：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。