瀑布流又称瀑布流式布局，以视觉表现为参差不齐的多栏布局为主，随着页面的滚动条不断向下滚动，这种布局会不断加载数据块并附加至当前尾部。实现这种布局有很多不同的方法：如flex布局，column-count 多栏布局，grid布局，float浮动布局。
flex实现瀑布流
先创建一个包住整个瀑布流的盒子，如果是2列，给该盒子设置display：flex;flex-wrap：wrap;完成这一步我们就可以有一个flex布局，超出该盒子宽度自动换行，然后在这个大盒子内部设置2个div容器，一列取奇数，一列取偶数即可简单进行实现
column-count 多栏布局
使用
先通过grid布局设置列数以及列的宽度，并通过js代码设置元素上边距和元素所需占行数
uni-app实现移动端瀑布流布局时需要先设置几列，在进行循环创建几个div，在进行浮动，然后在每个div里面放置图片，使用js代码计算每个图片高度
- vue-waterfall-easy
- vue-masonry-css
- vue-waterfall
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/46956.html