1. IT分享知识网首页

值得推荐的5种 瀑布流场景的实现原理解析

老牧童 • • 未分类 • 阅读 89

值得推荐的5种 瀑布流场景的实现原理解析一、背景—本文介绍 5 种瀑布流场景的实现，大家可以根据自身的需求场景进行选择。5 种场景分别是：1.纵向+高度排序：纯粹 CSS 多列实现，是

大家好，欢迎来到IT知识分享网。

一、背景—

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

5 种场景分别是：

1.纵向+高度排序：纯粹 CSS 多列实现，是最简单的瀑布流写法

2.纵向+高度排序+根据宽度自适应列数：通过 JS 根据屏幕宽度计算列数，在 web 端更加灵活地展示瀑布流

3.横向：纯 CSS 弹性布局实现，是最简单的横向瀑布流写法

4.横向+高度排序：横向+高度排序的瀑布流，需要通过 JS 计算每一列高度，损耗性能，但是可以避免某列特别长的情况，体验更好

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

我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 React 项目中安装使用。

二、介绍—

瀑布流，是比较流行的一种网站页面布局[1]，视觉表现为参差不齐的多栏布局，随着页面滚动条[2]向下滚动，这种布局还会不断加载数据块[3]并附加至当前尾部。

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

值得推荐的5种 瀑布流场景的实现原理解析

三、纵向+高度排序—

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

值得推荐的5种 瀑布流场景的实现原理解析

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

1. 多列布局介绍

多列布局[4]指的是 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:

值得推荐的5种 瀑布流场景的实现原理解析

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[5] 的使用方法：

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

在线预览[6]

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

在纵向+高度排序的基础上，按照宽度自适应列数。

值得推荐的5种 瀑布流场景的实现原理解析

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[7] 的使用方法：

链接：https://www.npmjs.com/package/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> ) }

在线预览[8]

预览地址：https://a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81–%E7%BA%B5%E5%90%91%E5%B8%83%E5%B1%80

五、横向—

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

值得推荐的5种 瀑布流场景的实现原理解析

实现横向瀑布流的方法是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[9] 的使用方法：

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

在线预览[10]

六、横向+高度排序—

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

值得推荐的5种 瀑布流场景的实现原理解析

高度排序就需要用 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[11] 的使用方法：

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

在线预览[12]

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

根据宽度自适应列数的做法和纵向场景一致，都是监听 resize 方法，根据屏幕宽度得到该宽度下应该展示的列数，这里不做赘述。

值得推荐的5种 瀑布流场景的实现原理解析

1. 直接使用 npm 包

npm – react-masonry-component2[13] 的使用方法：

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

在线预览[14]

小结—

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

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

感兴趣的同学可以到项目源码[15]查看完整实现代码。

也可以下载[16]直接使用。

更多思考—

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

相关链接—

[1]

页面布局: https://baike.baidu.com/item/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80?fromModule=lemma_inlink

[2]

滚动条: https://baike.baidu.com/item/%E6%BB%9A%E5%8A%A8%E6%9D%A1/?fromModule=lemma_inlink

[3]

数据块: https://baike.baidu.com/item/%E6%95%B0%E6%8D%AE%E5%9D%97/?fromModule=lemma_inlink

[4]

多列布局: https://www.runoob.com/css3/css3-multiple-columns.html

[5]

npm – react-masonry-component2: https://www.npmjs.com/package/react-masonry-component2

[6]

在线预览: https://a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81–%E7%BA%B5%E5%90%91%E5%B8%83%E5%B1%80

[7]

npm – react-masonry-component2: https://www.npmjs.com/package/react-masonry-component2

[8]

在线预览: https://a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81–%E7%BA%B5%E5%90%91%E5%B8%83%E5%B1%80

[9]

npm – react-masonry-component2: https://www.npmjs.com/package/react-masonry-component2

[10]

在线预览: https://a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81–%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80

[11]

npm – react-masonry-component2: https://www.npmjs.com/package/react-masonry-component2

[12]

在线预览: https://a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81–%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80%E9%AB%98%E5%BA%A6%E6%8E%92%E5%BA%8F

[13]

npm – react-masonry-component2: https://www.npmjs.com/package/react-masonry-component2

[14]

在线预览: https://a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81–%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80%E9%AB%98%E5%BA%A6%E6%8E%92%E5%BA%8F

[15]

项目源码: https://github.com/jiaozitang/react-masonry-component2

[16]

下载: https://www.npmjs.com/package/react-masonry-component2

来源地址：https://segmentfault.com/a/6245

作者：凹凸实验室

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/53402.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信