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

一、背景本文介绍了5种瀑布流场景的实现，大家可以根据自己的需要进行选择。五种场景分别是：瀑布特性垂直+高度排序纯CSS多列实现，这是最简单的瀑布写法垂直+高度排序+根据宽度自适应列通过JS根据屏幕宽度计算列数，这在web端更方便灵活展示瀑布流水平纯CSS弹性布局实现，是最简单的水平瀑布流写法水平+高度排序水平+高度排序瀑布流，需要通过JS计算每一列的高度，loss的性能，但可以避免列太长的情况，体验更好。横向+高度排序+根据宽度自适应列号需要通过JS计算每列的高度，根据屏幕宽度计算列数，损失性能，但可以避免某些情况column特别长，可以在web端展示，在终端展示瀑布流更灵活，体验更好。是五种瀑布流中用户体验最好的。我将这五个场景的实现打包成npm包。npm包地址：https://www.npmjs.com/package...，可直接在React项目中安装使用。2.引入瀑布流，这是一种流行的网站页面布局。视觉表现是不均匀的多栏布局。随着页面滚动条的向下滚动，这个布局会不断加载数据块，并追加到当前的尾部。下图是一个瀑布流布局的示意图：3.垂直+高度排序垂直+高度排序是指每列垂直排列，内容添加到高度最小的列，如下图。实现垂直+高度排序瀑布流的方式是CSS多栏布局。一、多栏布局介绍多栏布局是指CSS3可以像报纸一样设计文本内容的多栏布局，如下例所示：CSS3多栏属性：column-count：指定个数要划分的列；column-gap：指定列之间的间隙；column-rule-style：指定列之间的边框样式；column-rule-width：指定两列的边框粗细；column-rule-color：指定两列的边框颜色；column-rule：column-rule-*所有属性的简写；column-span：指定元素跨越多少列；column-width：列宽。2、实现思路瀑布流的实现思路是：利用CSScolumn-count将内容划分到指定的列；使用CSSbreak-inside确保每个子元素在包装之前呈现；3.实现code.css-column{column-count:4;//分成4列}.css-columndiv{break-inside:avoid;//确保每个子元素在包装前都被渲染}4.直接使用npm包npm-react-masonry-component2:import{Masonry}from'react-masonry-component2'exportconstMyComponent=(args)=>{return(

)}在线预览4.垂直+高度排序+自适应列号根据宽度在垂直+高度排序的基础上，列数根据宽度自适应。1.实现idea监控的resize方法，根据屏幕宽度获取屏幕宽度下应该显示的列数2.实现代码import{useCallback,useEffect,useMemo,useState}from'react'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)returnsetWidth(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(columnsCountBreakPointsasany)asunknownasnumber[]).sort((a:number,b:number)=>a-b)让count=breakPoints。长度>0？columnsCountBreakPoints![breakPoints[0]]:DEFAULT_COLUMNS_COUNTbreakPoints.forEach((breakPoint)=>{if(breakPoint{children}