【www.bbyears.com--样式布局】
问题是这样的,使用bootstrap的栅格进行布局的时候,如果大小超过了,会自动的转到下一行,但是在显示图片的时候就会出现缝隙,下面介绍masonry进行缝隙的填补。
好,下面上货。
1、首先是html
代码如下
<scripttype="text/javascript"src="jquery-2.1.4.min.js"></script>
<scripttype="text/javascript"src="bootstrap/masonry-docs.min.js"></script>
<scripttype="text/javascript"src="t.js"></script>
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
然后是t.js
代码如下$(function() {
var$container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector:'.box',
gutter: 20,
isAnimated:true,
});
});
});
最后是效果图:
调整浏览器大小,让图片显示成三列: