css 瀑布流布局问题 高手进

Posted 2023-03-28

如图所示， 现在我只是让每个盒子float：left而已，由于每个盒子高度不定，但是需要每一个盒子左右排列并且自动补空， 形成类似于瀑布流的样子， 需要怎么控制？
不考虑新盒子的加载，只对当前盒子进行排列布局。
我尝试使用 display：fiex ，但是只能控制行，而且会让所有盒子挤到一行上，而不是我想要的分2列自动布局。
求高手解疑答惑~~

这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子 参考技术A .fall
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-width: 24em;
-webkit-column-width: 24em;
column-width: 24em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;

.item
padding: 1em;
margin: 0 0.125em 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
/*这个是重点 */
break-inside: avoid;

这个的缺点是内容是竖排列的，横排的还是要用js 参考技术B 盒子外的div：

-moz-column-count: 3;
-webkit-column-count: 3;

column-count: 3;

/* 3是列数*/
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
/*2em是列间距*/


每个盒子：

float: left;

前端之瀑布流布局（多种实现方案）

参考技术A

瀑布流布局，一般指根据内容高度自适应填充到某一列以使整体页面和谐，常见的有图片网站，比如每一行每一列的内容是错开的。

瀑布流布局一般是下面这个样子

css中有这么两个属性:

注意

这也是我推荐大家用第一种方法的最主要原因。

这种方案做出来的效果有点奇葩，特殊的应用场景可能会用到，最终效果是横向瀑布流
flex布局中有一个属性 flex-flow ,指明在哪个方向上在长度不够的情况想拆行，详情大家自己查阅

第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如（1）图片预加载，（2）querySelector取元素居然获取不到，（3）使用box-sizing简化计算过程降低复杂性，等等。 box-sizing 属性用好了非常高效，推荐大家去仔细看看

第二种方法其实也可行，但是不推荐
第三种方法就有点扯了，估计不常用到，大家看看就行