摘要： 使用css3分栏写法，史上最简单的瀑布流写法
本文章，我们运用到css3分栏属性
column-width（列的宽度）
column-count（列数）
兼容性：
Internet Explorer 10 和 Opera 支持 column 属性。
Firefox 支持替代的 -moz-column 属性。
Safari 和 Chrome 支持替代的 -webkit-column 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。
啥也不说，附上效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
.box-group {
column-count: 3;
/*定义每行三个*/
}
.box {
margin-bottom: 30px
}
/*odd单数*/
.box:nth-child(odd) {
width: 100%;
height: 500px;
background: lightblue;
}
/*even双数*/
.box:nth-child(even) {
width: 100%;
height: 300px;
background: #999
}
/*响应式一行一个*/
@media screen and (max-width:768px) {
.box-group {
padding: 0 15px;
column-count: 1;
/*定义每行一个*/
}
}
</style>
<section class="box-group">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</section>
</body>
</html>
其实瀑布流写起来也没那么难，一段css样式就可以搞定了
这是我的原文链接Small Lucky瀑布流
如果想学瀑布流ajax加载，滚动下拉更新加载，关注我，点个赞，这是我的博客Small Lucky
网友评论