Vue中实现动态横向均匀排列块元素_科技

Vue中实现动态横向均匀排列块元素

创始人

2024-06-02 03:22:47

0次

最终效果

可参考该页面Demo，点击访问：https://www.devcat.cn/photos

在这里插入图片描述

实现思路

整体思路是将遍历元素的父布局设置为flex，并且将justify-content设置为space-around，但此时最后一行如果和上面均匀分布的数量不一样（少于），那么会出现剧中均匀分布，而不是想上面图片那样居左对齐排列。至于为什么不将justify-content设置为start，是因为如果设置为了start的话，右侧大概率会出现空白，导致两侧不是均匀分布的，影响体验。

我这里的解决方案是通过window得resize事件，监听屏幕的变化，在初始化页面的时候首先根据排列的元素宽度计算出当前宽度的屏幕中每一行会均匀排列多少个，然后再计算出最后一个行的元素有几个，那么这时候我们用每行均匀个数减去最后一行的个数就是我们需要补齐的个数，这里补齐的是空白的占位元素。

实现代码

Photos.vue :

以上只针对这种需求的一种解决方案，如果有用的话===>** 点赞+收藏 **

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：网络故障排除思路

下一篇：Altium Designer(AD)软件使用记录09-PCB布线部分之层叠设置、规则设置

Vue中实现动态横向均匀排列块元素

最终效果

实现思路

实现代码

相关内容

热门资讯