移动瀑布布局是一种更受欢迎的Web布局方法。从视觉上讲，这是一种布局，例如瀑布。每个图片不是一个正方形的正方形，但有些长而短，显示出不规则的形状。但是它们的宽度通常相同
由于移动瀑布的布局主要是垂直瀑布流，因此本文讨论的是垂直瀑布流量
垂直瀑布的布局主要具有以下特征：
与传统的分页不同，由于上述特征，在这些情况下通常使用瀑布流量：
一般而言，它主要分为CSS实施和JS实施
CSS实施主要使用一些特殊的样式属性，这些属性易于实现，但通常存在兼容性问题
JS实施方法没有这些问题，并且可以达到更个性化的需求，但是实施更麻烦
列实施瀑布流主要依赖两个属性
哥伦布属性总共设置为几列
列间隙属性是设置每个列之间的间隔
Flex意识到要设置为要水平排列的父元素的瀑布流。然后通过设置进行更改
可以发现图片的顺序是垂直的，然后是水平方向。多列布局和弹性弹性布局方法的渲染终于相似
如果不考虑兼容性或没有特殊的图片显示顺序需求，以上两个方案足以实现瀑布流量。如果您想实现某些个性化需求，您仍然必须使用JS
主要思想是：
与上面两个CSS实现的瀑布流不同，JS实现的图片的顺序是第一个水平方向，然后是垂直方向
您可以看到，当滚动页面滚动时，将连续添加新图片，以便您懒惰和加载
如果成就效果很简单且不兼容，则可以选择使用CSS来实现它。如果您想与旧版本的浏览器兼容或达到某些个性化需求
当然，除了上面提到的这些方法外，您还可以使用第三方库砌体实施
原始：https：//juejin.cn/post/7094886507730698270