一、背景

本文介绍 5 种瀑布流场景的实现，大家能够依据本身的需要场景进行抉择。

5 种场景别离是：

瀑布流特点
纵向+高度排序纯 CSS 多列实现，是最简略的瀑布流写法
纵向+高度排序+依据宽度自适应列数通过 JS 依据屏幕宽度计算列数，在 web 端更加灵便的展现瀑布流
横向纯 CSS 弹性布局实现，是最简略的横向瀑布流写法
横向+高度排序横向+高度排序的瀑布流，须要通过 JS 计算每一列高度，损耗性能，然而能够防止某列特地长的状况，体验更好
横向+高度排序+依据宽度自适应列数须要通过 JS 计算每一列高度，并依据屏幕宽度计算列数，损耗性能，然而能够防止某列特地长的状况，并且能够在 web 端更加灵便的展现瀑布流，体验更好，是 5 种瀑布流中用户体验最好的

我曾经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package...，能够间接在 React 我的项目中装置应用。

二、介绍

瀑布流，是比拟风行的一种网站页面布局，视觉体现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会一直加载数据块并附加至以后尾部。

下图就是一个瀑布流布局的示意图：

三、纵向+高度排序

纵向+高度排序指的是，每列依照纵向排列，往高度最小的列增加内容，如下图所示。

实现纵向+高度排序瀑布流的办法是 CSS 多列布局。

1. 多列布局介绍

多列布局指的是 CSS3 能够将文本内容设计成像报纸一样的多列布局，如下实例:

CSS3 的多列属性:

  • column-count：指定了须要宰割的列数；
  • column-gap：指定了列与列间的间隙；
  • column-rule-style：指定了列与列间的边框款式；
  • column-rule-width：指定了两列的边框厚度；
  • column-rule-color：指定了两列的边框色彩；
  • column-rule：是 column-rule-* 所有属性的简写；
  • column-span：指定元素逾越多少列；
  • column-width：指定了列的宽度。

2. 实现思路

瀑布流实现思路如下：

  • 通过 CSS column-count 宰割内容为指定列；
  • 通过 CSS break-inside 保障每个子元素渲染完再换行；

3. 实现代码

.css-column {  column-count: 4; //分为4列}.css-column div {  break-inside: avoid; // 保障每个子元素渲染完在换行}

4. 间接应用 npm 包

npm - react-masonry-component2 的应用办法：

import { Masonry } from 'react-masonry-component2'export const MyComponent = (args) => {  return (    <Masonry direction='column'>      <div></div>      <div></div>      <div></div>    </Masonry>  )}

在线预览

四、纵向+高度排序+依据宽度自适应列数

在纵向+高度排序的根底上，依照宽度自适应列数。

1. 实现思路

  • 监听 resize 办法，依据屏幕宽度失去该宽度下应该展现的列数

2. 实现代码

import { useCallback, useEffect, useMemo, useState } from 'react'import { DEFAULT_COLUMNS_COUNT } from '../const'export const useHasMounted = () => {  const [hasMounted, setHasMounted] = useState(false)  useEffect(() => {    setHasMounted(true)  }, [])  return hasMounted}export const useWindowWidth = () => {  const hasMounted = useHasMounted()  const [width, setWidth] = useState(0)  const handleResize = useCallback(() => {    if (!hasMounted) return    setWidth(window.innerWidth)  }, [hasMounted])  useEffect(() => {    if (hasMounted) {      window.addEventListener('resize', handleResize)      handleResize()      return () => window.removeEventListener('resize', handleResize)    }  }, [hasMounted, handleResize])  return width}export const useColumnCount = (columnsCountBreakPoints: {  [props: number]: number}) => {  const windowWidth = useWindowWidth()  const columnCount = useMemo(() => {    const breakPoints = (      Object.keys(columnsCountBreakPoints as any) as unknown as number[]    ).sort((a: number, b: number) => a - b)    let count =      breakPoints.length > 0        ? columnsCountBreakPoints![breakPoints[0]]        : DEFAULT_COLUMNS_COUNT    breakPoints.forEach((breakPoint) => {      if (breakPoint < windowWidth) {        count = columnsCountBreakPoints![breakPoint]      }    })    return count  }, [windowWidth, columnsCountBreakPoints])  return columnCount}

动静定义 style columnCount，实现依据屏幕宽度自适应列数：

const { columnsCountBreakPoints } = propsconst columnCount = useColumnCount(columnsCountBreakPoints)return (  <div className={classNames(['masonry-column-wrap'])} style={{ columnCount }}>    {children}  </div>)

3. 间接应用 npm 包

npm - react-masonry-component2 的应用办法：

import { Masonry } from 'react-masonry-component2'export const MyComponent = (args) => {  return (    <Masonry      direction='column'      columnsCountBreakPoints={{        1400: 5,        1000: 4,        700: 3,      }}    >      <div></div>      <div></div>      <div></div>    </Masonry>  )}

在线预览

五、横向

横向瀑布流指的是，每列依照横向排列，如下图所示。

实现横向瀑布流的办法是CSS 弹性布局。

1. 弹性布局介绍

弹性布局，是一种当页面须要适应不同的屏幕大小以及设施类型时确保元素领有失当的行为的布局形式。

引入弹性盒布局模型的目标是提供一种更加无效的形式来对一个容器中的子元素进行排列、对齐和调配空白空间。

CSS3 的弹性布局属性：

  • flex-dicreation：指定了弹性子元素的排列形式；
  • justify-content：指定了弹性布局的主轴对齐形式；
  • align-items：指定了弹性布局的侧轴对齐形式；
  • flex-wrap：指定了弹性子元素的换行形式；
  • align-content：指定弹性布局各行的对齐形式；
  • order：指定弹性子元素的排列程序；
  • align-self：指定弹性子元素的纵向对齐形式；

  • flex 属性用于指定弹性子元素如何调配空间；

    • auto: 计算值为 1 1 auto
    • initial: 计算值为 0 1 auto
    • none：计算值为 0 0 auto
    • inherit：从父元素继承
    • [ flex-grow ]：定义弹性盒子元素的扩大比率。
    • [ flex-shrink ]：定义弹性盒子元素的膨胀比率。
    • [ flex-basis ]：定义弹性盒子元素的默认基准值。

2. 实现思路

瀑布流实现思路如下：

  • CSS 弹性布局对 4 列按横向排列，对每一列外部按纵向排列。

3. 实现代码

瀑布流实现代码如下：

<div className={classNames(['masonry-flex-wrap'])}>  <div className='masonry-flex-wrap-column'>    <div></div>    <div></div>    <div></div>    <div></div>  </div>  <div className='masonry-flex-wrap-column'>    <div></div>    <div></div>    <div></div>    <div></div>  </div></div>
.masonry-flex-wrap {  display: flex;  flex-direction: row;  justify-content: center;  align-content: stretch;  &-column {    display: 'flex';    flex-direction: 'column';    justify-content: 'flex-start';    align-content: 'stretch';    flex: 1;  }}

4. 间接应用 npm 包

npm - react-masonry-component2 的应用办法：

import { Masonry } from 'react-masonry-component2'export const MyComponent = (args) => {  return (    <Masonry      columnsCountBreakPoints={{        1400: 5,        1000: 4,        700: 3,      }}    >      <div></div>      <div></div>      <div></div>    </Masonry>  )}

在线预览

六、横向+高度排序

横向+高度排序指的是，每列依照横向排列，往高度最小的列增加内容，如下图所示。

高度排序就须要用 JS 逻辑来做了。

1. 实现思路

  • JS 将瀑布流的列表按高度均为分为指定列数，比方瀑布流为 4 列，那么就要把瀑布流列表分成 4 个列表

2. 实现代码

export const getColumnsSortWithHeight = (  children: React.ReactNode,  columnCount: number) => {  const columns: {    height: number    children: React.ReactNode[]  }[] = Array.from({ length: columnCount }, () => ({    height: 0,    children: [],  }))  React.Children.forEach(children, (child: React.ReactNode, index) => {    if (child && React.isValidElement(child)) {      if (index < columns.length) {        columns[index % columnCount].children.push(child)        columns[index % columnCount].height += child.props.height        return      }      const minHeightColumn = minBy(columns, (a) => a.height) as {        height: number        children: React.ReactNode[]      }      minHeightColumn.children.push(child)      minHeightColumn.height += child.props.height    }  })  return columns}

3. 间接应用 npm 包

npm - react-masonry-component2 的应用办法：

import { Masonry, MasonryItem } from 'react-masonry-component2'export const MyComponent = (args) => {  return (    <Masonry      sortWithHeight      columnsCountBreakPoints={{        1400: 5,        1000: 4,        700: 3,      }}    >      <MasonryItem height={200}>        <div></div>      </MasonryItem>      <MasonryItem height={300}>        <div></div>      </MasonryItem>      <MasonryItem height={400}>        <div></div>      </MasonryItem>    </Masonry>  )}

在线预览

七、横向+高度排序+依据宽度自适应列数

依据宽度自适应列数的做法和纵向场景统一，都是监听 resize 办法，依据屏幕宽度失去该宽度下应该展现的列数，这里不做赘述。

1. 间接应用 npm 包

npm - react-masonry-component2 的应用办法：

import { Masonry } from 'react-masonry-component2'export const MyComponent = (args) => {  return (    <Masonry      sortWithHeight      direction='column'      columnsCountBreakPoints={{        1400: 5,        1000: 4,        700: 3,      }}    >      <div></div>      <div></div>      <div></div>    </Masonry>  )}

在线预览

小结

本文介绍了 5 种瀑布流场景的实现：

  • 纵向+高度排序
  • 纵向+高度排序+依据宽度自适应列数
  • 横向
  • 横向+高度排序
  • 横向+高度排序+依据宽度自适应列数

感兴趣的同学能够到我的项目源码查看残缺实现代码。

也能够下载间接应用。

更多思考

当瀑布流数据特地多时，dom 节点过多，会影响到页面性能，那么就须要为瀑布流增加滚动预加载和节点回收性能来进行优化了，在下个版本中将更新滚动预加载和节点回收性能的实现原理。