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

原副标题：5 种峡谷流情景的同时实现基本原理导出

一、大背景—

责任编辑如是说 5 种峡谷流情景的同时实现， 我们能依照另一方面的市场需求情景展开优先选择。

5 种情景依次是：

我早已将这 5 种场景的同时实现PCB成 npm 包，npm 包门牌号：https://www.npmjs.com/package/react-masonry-component2，能间接在 React 工程项目中加装采用。

二、介绍—

峡谷流，是较为盛行的一类中文网站 网页产业布局[1] ，听觉整体表现为良莠不齐的多栏产业布局，随著网页 快捷方式[2] 向上慢速，此种产业布局还会急速读取 统计数据块[3] 并附带至现阶段前部。

右图是两个峡谷流产业布局的左图：

三、横向+度次序—

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

同时实现横向+度次序峡谷流的方法是 CSS 卡代纳产业布局。

1. 卡代纳产业布局如是说

卡代纳产业布局[4] 指的是 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 保证每个子元素渲染完再换行；

column-count: 4; //分为4列

}

.css-columndiv{

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]

四、横向+度次序+依照长度自适应科舞—

在横向+度次序的基础上，按照长度自适应科舞。

1. 同时实现思路

监听 resize 方法，依照萤幕长度得到该长度下应该展现的科舞

import{ DEFAULT_COLUMNS_COUNT } from../const

exportconstuseHasMounted = => {

const[hasMounted, setHasMounted] = useState(false)

useEffect( => {

setHasMounted( true)

}, [])

returnhasMounted

}

exportconstuseWindowWidth ==> {

consthasMounted = useHasMounted

const[width, setWidth] = useState( 0)

consthandleResize = useCallback(=> {

if(!hasMounted) return

setWidth( window.innerWidth)

}, [hasMounted])

useEffect( => {

if(hasMounted) {

window.addEventListener( resize, handleResize)

handleResize

return=> window.removeEventListener( resize, handleResize)

}

}, [hasMounted, handleResize])

returnwidth

}

exportconstuseColumnCount = (columnsCountBreakPoints: {

[props: number]: number

}) => {

constwindowWidth = useWindowWidth

constcolumnCount = useMemo(=> {

constbreakPoints = (

Object.keys(columnsCountBreakPoints asany) asunknown asnumber[]

).sort( ( a: number, b: number) => a – b)

letcount =

breakPoints.length > 0

? columnsCountBreakPoints![breakPoints[ 0]]

: DEFAULT_COLUMNS_COUNT

breakPoints.forEach( ( breakPoint) => {

if(breakPoint < windowWidth) {

count = columnsCountBreakPoints![breakPoint]

}

})

returncount

}, [windowWidth, columnsCountBreakPoints])

returncolumnCount

}

动态定义 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] 的采用方法：

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]

五、横向—

横向峡谷流指的是，每列按照横向排列，如右图所示。

同时实现横向峡谷流的方法是 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 ] ：定义灵活性盒子元素的默认基准值。

峡谷流同时实现思路如下：

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;

}

}

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]

六、横向+度次序—

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

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

1. 同时实现思路

JS 将峡谷流的列表按度均为分为指定科舞，比如峡谷流为 4 列，那么就要把峡谷流列表分成 4 个列表

children: React.ReactNode,

columnCount: number

) => {

constcolumns: {

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

}

constminHeightColumn = minBy(columns, ( a) => a.height) as{

height: number

children: React.ReactNode[]

}

minHeightColumn.children.push(child)

minHeightColumn.height += child.props.height

}

})

returncolumns

}

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 方法，依照萤幕长度得到该长度下应该展现的科舞，这里不做赘述。

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][3][4]

卡代纳产业布局: https://www.runoob.com/css3/css3-multiple-columns.html

[5]

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

[6][7]

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

[8][9]

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

[10][11]

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

[12][13]

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

[14][15]

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

[16]

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

END

这里有最新开源资讯、软件更新、技术干货等内容

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦~