首页 > 其他分享 >5 种瀑布流场景的实现原理解析

5 种瀑布流场景的实现原理解析

时间：2022-09-29 18:12:49浏览次数：72

标签：场景 const column 瀑布排序列数 return 解析

一、背景

本文介绍 5 种瀑布流场景的实现，大家可以根据自身的需求场景进行选择。

5 种场景分别是：

瀑布流	特点
纵向+高度排序	纯 CSS 多列实现，是最简单的瀑布流写法
纵向+高度排序+根据宽度自适应列数	通过 JS 根据屏幕宽度计算列数，在 web 端更加灵活的展示瀑布流
横向	纯 CSS 弹性布局实现，是最简单的横向瀑布流写法
横向+高度排序	横向+高度排序的瀑布流，需要通过 JS 计算每一列高度，损耗性能，但是可以避免某列特别长的情况，体验更好
横向+高度排序+根据宽度自适应列数	需要通过 JS 计算每一列高度，并根据屏幕宽度计算列数，损耗性能，但是可以避免某列特别长的情况，并且可以在 web 端更加灵活的展示瀑布流，体验更好，是 5 种瀑布流中用户体验最好的

我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 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 } = props
const 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 节点过多，会影响到页面性能，那么就需要为瀑布流添加滚动预加载和节点回收功能来进行优化了，在下个版本中将更新滚动预加载和节点回收功能的实现原理。

标签：场景,const,column,瀑布,排序,列数,return,解析
From： https://www.cnblogs.com/o2team/p/16742503.html

相关文章

MYSQL连接字符串参数解析
Server，host,datasource,datasource,address,addr,networkaddress:数据库位置(以上任何关键字均可)Database，initialcatalog：数据库名Port： socket端口......
OpenMLDB Meetup No.6 回顾 | OpenMLDB＋37手游：一键查收特征计算场景案例及进阶使用攻略
OpenMLDBMeetupNo.6回顾会议内容OpenMLDB社区于2022年9月24日举行了第六期meetup，会议相关视频及资料如下：OpenMLDBPMCcoremember卢冕，以《开源机器学习数据库OpenM......
Content-Type 解析
Content-Type定义Content-Type（MediaType），即是InternetMediaType，互联网媒体类型，也叫做MIME类型。在互联网中有成百上千中不同的数据类型，HTTP在传输数据对象时会为他们打......
QT——vs 中配置qt动态库，无法解析外部命令，解决办法
vs+qt动态库无法解析外部符号的问题原文链接https://itcn.blog/p/0541664353.html 1、问题描述：无法解析的外部符号解决方案：引用的库没有引用进来，结局方案如下：（1......
Optional源码解析与实践
1导读NullPointerException在开发过程中经常遇到，稍有不慎小BUG就出现了，如果避免这个问题呢，Optional就是专门解决这个问题的类，那么Optional如何使用呢？让我们一起探索一下......
WPF 通过 GifBitmapDecoder 调用 WIC 解析 Gif 和进行动画播放的简单方法
本文告诉大家如何在WPF里，通过GifBitmapDecoder调用WIC层来解析GIF图片，然后采用动画的方式进行播放在上一篇博客告诉大家，可以通过GifBitmapDecoder调用WIC层解......
python scapy dns 包字段解析
qr： 0表示查询报文，1表示响应报文opcode：通常值为0（标准查询），其他值为1（反向查询）和2（服务器状态请求）。aa：表示授权回答（authoritativeanswer）tc： ......
Flask 学习-81.Flask-RESTX使用reqparse 解析器校验枚举类型choices 参数
前言reqparse.RequestParser()解析器可以校验枚举类型，在add_argument中使用choices参数choices设置参数可选值比如性别设置可选项：男、女defpost(self):......
Can’t connect to local MySQL server through socket 原因解析
在连接mysql的时，经常会出现以下错误提示：ERROR2002(HY000):Can'tconnecttolocalMySQLserverthroughsocket'/var/lib/mysql/mysql.sock' 出现此错误提示的原因一......
iptables 常用命令解析
查看当前iptables规则：iptables-n-L--line-numbers该命令会以列表的形式显示出当前使用的iptables规则，并不做解析，每一条规则前面的编号可以用来做为其它操作，例如后面的......

赞助商

阅读排行