第一个渲染：
瀑布流是前端的常见布局。特定的表现形式是多柱布局，固定宽度和高度。在同一时间，随着页面的滚动，新元素将继续添加到瀑布后部的最低列。
常见的瀑布流具有以下三种样式：
移动一侧淘宝页：
- 可覆盖的瀑布流：交错瀑布流量目前是主要应用程序主页最常用的布局格式，它也是用户最视觉上的布局：##实现几种常见的瀑布流程。瀑布流量开源插头 - 主要包括以下内容： - 绝对定位：此布局需要知道图片渲染前图片的宽度和高度，因此每次将图片插入高度列时。布局：这种布局还将新添加的图片插入高度的高度，但不是通过绝对定位。##练习给定背景接口的宽度和高度直接返回到图片的宽度和高度不是现实且交错的布局最困难的。因此，这种做法使用柔性布局方案来实现交错的瀑布流。### flex布局实现瀑布流 - 第一步：瀑布的数列流，假设它是x -2nd步骤：从瀑布流图界面ListOne Line -3rd步骤中取出上一个X元素：从X+1元素开始（**此步骤是本质**） - 第一个计算每列的高度 - 然后添加当前元素要添加到最低高度的第三步，直到将所有元素添加到瀑布流中，然后在练习之前提供必要的知识。在渲染当前图片之前，您需要知道每列的高度，因此在将当前图片添加到瀑布流之前，我们需要确保我们需要保证以前添加的图片已在页面上显示。知道上一张图片已经成功地渲染了吗？如何在上一张图片渲染成功之后添加新图片？这涉及HE的生命周期和API的概念：####互联网浏览器是什么？##### thistersectionObserver结构可以自动监视该元素是否进入设备的视觉区域而无需使用频繁计算（例如，我们根据是否触底滚动栏进行的一些判断）。因为可见的本质是目标元素和视口会生成一个跨区域，因此该API称为“交叉观测器”。通过上述描述，实际上，我们经常提到的图片可以由API实现。从滚动条的距离计算中也消除了这一点。````是由浏览器本机提供的构造函数，接收两个参数： - ：当可见性更改时回调函数，包括更改的两个参数和观察者 - 值是一个观察到的实例。例如，有4种方法： - ：：：：：：：：：开始收听特定元素 - ：停止监视特定元素 - ：关闭监视工作 - ：对象对象对象对象对象对象对象对象对象对象的第一个参数是尾部添加元素的后元素的重要属性之一！此对象包含以下属性： - ：目标元素的矩形区域的信息 - ：目标元素的可见比例，即boundingCletRectRectRectRect的commitchrect帐户的比例。当目标元素与视口（或根元素）完全看不见时，当它完全不可见 - :: boolean值时目标元素是相交的交叉点观察者的根节点（**通常使用的**） - ：布尔值，是否可见目标元素（此属性仍处于测试阶段，不建议在该测试阶段，建议在生产环境） - ：有关根部元素矩形区域的信息，getBoundingClientRect（）方法的返回值， 如果没有根，则没有根元素（即直接相对于视图端口滚动），请返回null - ：观察到的目标元素是DOM节点对象（**常用**） - ：可见性时间这是一个高处于时间戳记，该单元位于本文中要实现的瀑布流中，如下所示：并添加到瀑布流量最小的高度时，等待图片被完全加载。observerobj.unobserve（target）}}}}}}}}}}} {rootmargin：'0px 0px 0px 300px 0px'，//``//####在vue中，使用nextTick实现异步添加是一种在中间和不同的步骤中调用dom的解决方案。它与挂钩函数有点相似：````````sextired section night night night night night night night night night night => {columnArray = {columnArray =document.quryselectiverall（'。flex-colorn'）[index] .queryseletorall（'。加载下一张图片介绍：````````````javaScript useffect（（）=> {if（datalist.length> 0）{// jumppass console.log（'add add pictures'addpicture（）aiddpicture（）}}，[have]）````### vue3.0使用flex实现瀑布流源代码``typescript
字符串} const colorncount = 4;让数据=等待Axios（'https://www.shouxicto.com/article/waterfall.json'）;令AllColumnData =反应（arraay.from（new arom（new arom（new arom（new arom））（新arom（new arom（new arom（new arom）（新arom（new arom（new arom）（new arom（new arom（new arom（new arom> nwwrom> new array（new array（），）;对于（让i = 0; i //瀑布流布局：取出数据源中的顶部，并添加到瀑布流的最小高度。图片完全加载后，重复Cycle0px 0px 300px 0px'，//提前加载高度}），令dataindex = columnCount; const addpiction =（）=> {if（dataindex> = data.length）{alert（'terraper（'图片已加载以完成'）
}
onmount（（）=> {addpicture（）;}）
.flex-download {显示：flex;弹性方向：行；宽度：90VW;保证金：5VW;Jusify-confy：空间Quant;Align-Itms：Flex-Start;} //响应，例如，屏幕宽度显示5列，屏幕宽度显示在4列中。flex-column {显示：flex;挠性方向：科伦；宽度：25％；保证金：10px;}
.flex-column-ele {img {width：100％;最大高度：500px;对象拟合：包含;}
}
-9MP97GY410T7ZCBMM_QA1PFCAYTY-N-RG8.JPG“，” DESC”：“ Chengdu City |地铁直接直接宠物绣球海？“数字，imgurl：字符串，desc：string}
导出const axios =（url：string）：承诺
}
本文使用布局，结合API和异步加载DOM来完成瀑布流的简单版本。感兴趣的朋友可以在源代码的基础上继续改进，并实现通过懒惰负载和懒惰加载和相结合的无限滚动瀑布流量瀑布流。
也许朋友会有问题。瀑布不是一个人的流动吗？为什么我需要结合懒惰？这是由于效率问题，背景很可能会将数据返回前台，而瀑布流量仅在一个上逐一加载当前页面。因此，有必要与懒惰合作，要求每个页面上的数据。
原始：https：//juejin.cn/post/709834661097478573