css+div 实现自适应瀑布流
演示：
<style>
.item {
column-gap: 22px;/*每列间隔*/
max-width: 1500px;/*最大宽度*/
column-count: 4;/*默认四列*/
margin: auto;/*宽屏时居中*/
}
/*适应屏幕宽度*/
@media only screen and (max-width: 1904px) {.item {column-count: 4;}}/*其实这一行可以不写。。。因为默认就是4列*/
@media only screen and (max-width: 1264px) {.item {column-count: 3;}}
@media only screen and (max-width: 960px) {.item {column-count: 2;}}
@media only screen and (max-width: 600px) {.item {column-count: 1;column-gap: 0;}}
.item>.item__content {
text-align: center;
overflow: auto;
/*overflow-x可以随意，但是y一定要auto，否则div会被截断*/
/*如果特殊需要，可以在里面嵌套一层div限制高度，外层不要动*/
}
</style>
<div class="item">
<div class="item__content">1</div>
<div class="item__content">2</div>
<div class="item__content">3</div>
<!--省略若干行->
</div>
<script type="text/javascript">
// 修改随机颜色为了看起来更清楚，
// 修改随机高度为了占位
[...document.querySelectorAll(".item__content")].map(a=>{
a.style.background = "#" + Math.random().toString(16).slice(2, 8)
//随机颜色
a.style.height = Math.floor(50 + Math.random() * 500) + "px"
//随机高度
});
</script>
评论
