关于前端:5-种瀑布流场景的实现原理解析

31次阅读

共计 5786 个字符，预计需要花费 15 分钟才能阅读完成。

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

5 种场景别离是：

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

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

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

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

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

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

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

CSS3 的多列属性:

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

瀑布流实现思路如下：

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

.css-column {column-count: 4; // 分为 4 列}

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

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>
  )
}

在线预览

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

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

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} = props
const columnCount = useColumnCount(columnsCountBreakPoints)
return (<div className={classNames(['masonry-column-wrap'])} style={{columnCount}}>
    {children}
  </div>
)

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 弹性布局。

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

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

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]：定义弹性盒子元素的默认基准值。

瀑布流实现思路如下：

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

瀑布流实现代码如下：

<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;
  }
}

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 逻辑来做了。

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

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
}

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 办法，依据屏幕宽度失去该宽度下应该展现的列数，这里不做赘述。

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 节点过多，会影响到页面性能，那么就须要为瀑布流增加滚动预加载和节点回收性能来进行优化了，在下个版本中将更新滚动预加载和节点回收性能的实现原理。

正文完

前端

发表至：前端

2022-09-29

0

关于前端:vitevue3下如何使用动态导入的svgsprite雪碧图

关于前端:CSS-Flexbox-布局

关于前端:熬夜整理56个JavaScript高级的手写知识点专业扫盲

关于前端:图扑数字孪生智慧加油站构建安全防护网

关于安全:网络空间中的秘密行动Say活动和情报竞赛

关于前端:5-种瀑布流场景的实现原理解析

一、背景

二、介绍

三、纵向 + 高度排序

1. 多列布局介绍

2. 实现思路

3. 实现代码

4. 间接应用 npm 包

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

1. 实现思路

2. 实现代码

3. 间接应用 npm 包

五、横向

1. 弹性布局介绍

2. 实现思路

3. 实现代码

4. 间接应用 npm 包

六、横向 + 高度排序

1. 实现思路

2. 实现代码

3. 间接应用 npm 包

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

1. 间接应用 npm 包

小结

更多思考

Just My Socks（注册教程内含优惠码）

关于前端:5-种瀑布流场景的实现原理解析

一、背景

二、介绍

三、纵向 + 高度排序

1. 多列布局介绍

2. 实现思路

3. 实现代码

4. 间接应用 npm 包

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

1. 实现思路

2. 实现代码

3. 间接应用 npm 包

五、横向

1. 弹性布局介绍

2. 实现思路

3. 实现代码

4. 间接应用 npm 包

六、横向 + 高度排序

1. 实现思路

2. 实现代码

3. 间接应用 npm 包

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

1. 间接应用 npm 包

小结

更多思考

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）