手撸瀑布流

news2024/11/15 11:35:40

一、需求？

要求实现一排两列瀑布流样式，样式如下：其中A为容器，B为组件样式，卡片高度会因为标题的多少来自适应。
在这里插入图片描述

二、解法

1.使用CSS的column（⚠️不推荐）

使用CSS 属性 column 用来设置元素的列宽和列数

/* 一个元素的内容分成2列 */
column-count: 2
/* 设置元素列之间的间隔（gutter）大小 */
column-gap: 20px;

不足

若B组件有margin (上下marign) ，将导致第一排样式对不齐，类似下图：
在这里插入图片描述

解决

此时可以在B组件下，写一个div的高度当作margin去使用，此时样式将会正确排列。
举个🌰子；在B组件下，添加一个div，类名为placeholder，平替margin-bottom:18px。

.placeholder {
  height: 18px;
}

2.使用flex布局

前提

第一反应是直接flex布局，flex: 0 0 50%,超出的换行展示，干不就完了？但是由于这样写，每行的高度一致，不符合需求
在这里插入图片描述

换个思路？

既然高度不能对齐，就不考虑横向排列，变为竖向排列。
将父容器A，拆分为B、C两个子容器，其宽度仍为每个50%，B/C容器中，组件竖向排列，这样处理时，样式问题已经解决了，但是展示顺序需要重新处理。
在这里插入图片描述

顺序展示问题

按元素正常排列规则为第一行1、2，第二行3、4，按上图应为，B容器为1、3、4，C容器为2，4；总结下来：即B为奇数行，C为偶数行。下面用数据更清晰的说明～
在这里插入图片描述

举个🌰

假设数据如下

const list = [1,2,3,4,5]
// 过滤出单数
const oddNumbers = list.filter(num => num % 2 !== 0);
// 过滤出双数
const evenNumbers = list.filter(num => num % 2 === 0);

数据展示如下：

 <div className={styles.list}>
   <div className={styles.column}>
      {renderItem(oddColumns)}
   </div>
    <div className={styles.column}>
      {renderItem(evenColumns)}
    </div>
</div>

 .list {
    display: flex;
    justify-content: space-between;
    margin: 0 17px;

    .column {
      display: flex;
      flex-direction: column;
    }
  }