我相信每个人都不对瀑布陌生。这是一个更受欢迎的网站页面布局。视觉表达是多列布局。随着页面滚动条向下滚动，这种布局将不断加载数据块并附加到当前的尾巴上。采用该布局的最早网站是Pinterest，逐渐在中国流行。大多数国内新鲜站基本上都是这样的样式。
他具有以下特征：
由于瀑布流中有很多场景，因此我们目前的时期是前端瀑布的三个实施解决方案，以及它们用于探索的优势。
哥伦布可以指定容器下元素列的宽度和数量
但是我们的瀑布流量使用的CSS属性是：
列计数：指定列数
列间隙：列之间的缝隙
意识到我们将20张图片放在HTML中作为此演示。
在这里，我们将其设置为带有Columbn计数的4列，并且列间距为10个像素。就两个简单的句子，我们意识到了瀑布流量。
顺便说一句，对于我们更直观的观察和布置定律，我们使用伪级来制作反击（随后的方案将出现该伪类和HTML结构）。
影响
我们可以观察到计数的投标，我们知道列的排名从上到下，然后从左到右划分。
优势和缺点1.兼容性仍然不令人满意。
2.在控制之前，安排定律将始终向上和向下。它不能控制。动态加载将导致严重问题。
所使用的HTML结构与伪阶级计数的结构相同，并且不再有太多职业。
该方案使用弹性盒。你没有听到。您还可以通过灵活的布局实现瀑布流。尽管有许多局限性，但也可以在某些需求方案中使用。
将弹性盒设置为母容器之后，因为瀑布流量为多线，我们还需要flex包装来设置包裹，并且必须将flex方向设置为Colorn。最重要的是设置一个高度。当然，在其子元素百分比设置中显示了几列。
这样，Flex也可以实现瀑布流。
当然，如果我们想更改一定程度的顺序优先级，我们可以更改CSS的顺序属性。
影响
您可以看到还实现了弹性瀑布流，并且该顺序可以在一定程度上更改其顺序。它不像必须在离开之前和向下安排列。
如果JS的优势和缺点意识到瀑布的流量，我们可以考虑将所有元素设置为绝对定位。然后聆听已加载的图片。如果加载加载，请将子元素的相应位置设置为一个一个一个一个一个一个一个一个。
意识到我们首先在配置阶段设置父容器和列。
然后写下瀑布课：
让我们在这里简单地实现：
影响
我们可以看到，这种瀑布的流量更符合我们的期望，并且我们可以看到他的初始订单从左到右更改。
我们已经完成了这三种解决方案的优势和缺点。实际上，大多数商业等级是JS实施的瀑布流，例如同位素和其他插件。实现本质并不麻烦。我们有时间打包一个设置，如何在VUE上使用它，如何在React上使用它，如何过滤，如何使用关键字等进行排序等。我们可以考虑使用它。，所以自己尝试一下还不错。你想自己做吗？