纯css单层div实现自适应瀑布流
本帖最后由 涛之雨 于 2022-7-27 23:33 编辑github 代码：https://taozhiyu.github.io/waterfall/
demo：https://taozhiyu.github.io/waterfall/
演示：
https://pic.rmb.bdstatic.com/bjh/71410edd3e35ba184a5870f114d83b32.gif
（屏幕宽度不够就靠浏览器缩放凑的屑）
核心代码：
<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>
npc404 发表于 2022-7-28 00:09
这种方式有个缺点，图片的顺序是每列由上而下的，不是每行从左到右。以前想过有没有解决方案，不过最后没想 ...
没办法，主要想做的是自适应+纯css，每行从左到右其实也有问题，就是高度不一样很有可能某一个到第三个块了，另一个还是第一个瀑布流本来就适合做无序堆叠，但是这个确实有个很大的问题就是不适合动态添加。。。比较适合做数据的静态显示（数据个数和高度的变化会导致元素块漂移） 极品小猫 发表于 2022-7-28 15:08
说实话，我个人其实非常不喜欢瀑布流，但是瀑布流在展示和推广时，效果却非常好
特别是热加载（虽然我这个不是很适合做热加载，这个只适合做静态数据显示，动态修改会导致有可能新生成的元素在上面） 这种方式有个缺点，图片的顺序是每列由上而下的，不是每行从左到右。以前想过有没有解决方案，不过最后没想到放弃了{:301_1005:} 好厉害，学到了。 厉害，厉害 宽度一致, 而且竖排的话, 直接使用flex-row布局就可以了 学到了，厉害
ggnb
学到了 感谢分享 最近在学web，学习一下