css 瀑布流图片布局 |css中float属性的作用

下面让大家来看一下如何使用CSS来实现瀑布流布局：

/*定义一个定位容器*/
.container {
position: relative;
width: 100%;
}
/*定义每一个图片块*/
.item {
position: absolute;
}
/*定义每一个图片块高度*/
.item img {
height: 100%;
}
/*每一行图片的间距*/
.gap {
margin-bottom: 20px;
/*设置行间距，这里用20px，看个人需要*/
}
/*根据屏幕宽度来计算每一行的数量*/
@media screen and (min-width: 640px) and (max-width: 767px) {
.item { width: 48%; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.item { width: 31.5%; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.item { width: 23.6%; }
}
@media screen and (min-width: 1200px) {
.item { width: 18%; }
}

通过上述代码，大家定义了一个名为.container的定位容器，然后使用.position:absolute将每个图片块放置在容器内，并使用@media screen将每个图片块的宽度设置到了不同的屏幕宽度。其中每个.item都有个gap，它是用来控制每行图片之间的间距。

最后大家需要在HTML中使用div标签来定义图片块，将图片放入每个块内，并添加类名，就能够成功实现瀑布流布局了。

总之，使用CSS实现瀑布流布局非常简单，只需要简单的CSS代码即可。在实现时，要注意每个元素之间的间距，以及根据屏幕宽度设置每个元素的宽度。