bootstrap配合Masonry插件实现瀑布式布局

bootstrap配合Masonry插件实现瀑布式布局

问题是这样的，使用bootstrap的栅格进行布局的时候，如果大小超过了，会自动的转到下一行，但是在显示图片的时候就会出现缝隙，下面介绍masonry进行缝隙的填补。

好，下面上货。

1、首先是html

123

然后是t.js

$(function() {

var $container = $('#masonry');

$container.imagesLoaded(function() {

$container.masonry({

itemSelector: '.box',

gutter: 20,

isAnimated: true,

});

});

});

最后是效果图：

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

源码下载：http://xiazai.jb51.net/201701/yuanma/bootstrappubu(jb51.net).rar

参考：//jb51.net/article/103444.htm

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。