18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

六个微信小程序共享_bootstrap合作Masonry插件完成瀑

2021-01-12分享 "> 对不起,没有下一图集了!">
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, 
 }); 
 }); 

最后是效果图:

调整浏览器大小,让图片显示成三列:

源码下载:

参考:

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


"> 对不起,没有下一图集了!">
在线咨询