瀑布流是一种流行的网站页面布局方式，其特点是多栏等宽不等高的排列，随着用户滚动页面，数据块不断加载并附加至当前尾部。

Masonry.js在 github 上非常火, 目前已有 16.3k star, 有很多网站都采用它的方案实现瀑布流布局. 在**文末**我会附上这个开源项目的地址, 方便大家学

瀑布流又称瀑布流式布局，以视觉表现为参差不齐的多栏布局为主，随着页面的滚动条不断向下滚动，这种布局会不断加载数据块并附加至当前尾部。实现这种布局有很多不同的方法：如flex布局，column-coun

在图片网站中，通常是使用瀑布流的方式来显示图片，等宽度不等高，这样显得错落有致 今天 使用Vue3实现一个瀑布流组件，并发布为一个npm包 grid布局 支持响应式 参考自react-plock 1、

瀑布流布局 如今，瀑布流布局已经在很多网站中得到应用，比如小红书、京东等平台我们都能找到瀑布流的身影，如图： 小红书 京东 瀑布流这种错落有致的布局方式给用户一种视差感，它打破了常规网页排版，清新脱俗

瀑布流页面布局，故名思义就是页面上的元素子项像瀑布一样进行上下紧凑布局，一般图片类网站、电商类或者博客类的网站经常会使用这种布局，使得展示的元素比较紧凑和丰富， 类似下图 这里总结一下瀑布流布局主要有

事情起因是这样的，大家在刷抖音，小红书等短视频平台、发现他们的布局是这样的瀑布流布局。 反应是瀑布流，怎么做呢？我们第一反应是flex，grid？是的这是大部分人的固态思维 我认为这极为麻烦，因为你甚

大家在刷xx等短视频平台，发现都是这样的瀑布流布局 云哥一行代码直接实现瀑布流，很多前端都不会做。 云哥教大家通过砌体布局一行代码： columns: 300px auto; 就能实现瀑布流。 简直逆

前言 在当今数字化的世界中，网页设计不仅仅是功能性的追求，更注重用户体验的提升。其中，瀑布流布局作为一种独特的设计风格，逐渐走红并成为许多网站的首选。本文将探讨瀑布流布局的背后原理、优势以及实现方法，