瀑布流的 Elementor 布局核心是基于网格的一个 Elementor 布局,而且高度是根据其中内容的而变化的,呈堆叠形式排列。
 

  实现方法:首先在父级样 CSS 样式里加入:column-count: 2; column-gap: 0;column-count 为列数; column-gap 为每列间隔距离; column-rule 为间隔边线大小; column-width 为每列宽度; 当只设定 column-width 时,浏览器视窗小于一列宽度时,列中内容自动隐藏; 当只设定 column-count 时,平均计算每列宽度,列内内容超出则隐藏; 都设了 column-count 和 column-width,浏览器会根据 count 计算宽度和 width 比较,取大的那个值作为每列宽度,然后当视窗缩小时,width 的值为每列最小宽度。这边其实很简单,简易自己尝试下。在 CSS 中有一个 break-inside 属性,这个属性也是实现瀑布流 Elementor 布局最关键的属性,为了控制文字块分解成单独的列,这样一个 CSS 实现瀑布流的方法就实现了。