<p>瀑布流又称瀑布流式布局，以视觉表现为参差不齐的多栏布局为主，随着页面的滚动条不断向下滚动，这种布局会不断加载数据块并附加至当前尾部。实现这种布局有很多不同的方法：如flex布局，column-count 多栏布局，grid布局，float浮动布局。</p> 讯享网
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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/205447.html