像这种图片的高度一样 但是宽度不一致 怎么在加载列表的时候自动补到所缺的位置上去 看到的瀑布流插件都是等宽的计算方法 有没有类似的插件能实现这种效果 列表数量和图片的排序都是不定的
<template>
<div class="waterfall-height-css">
<div class="image-box" v-for="img in imgList" :key="img.url">
![](img.url)
</div>
</div>
</template>
<script>
<style lang="scss" scoped>
.waterfall-height-css {
display: flex;
flex-wrap: wrap;
.image-box {
flex-grow: 1;
}
img {
display: block;
min-width: 100%;
height: 200px;
object-fit: cover;
}
}
</style>
###这个功能我做过,比你想象中的要复杂。建议做一下取舍,如果不是很必要的话,换用一些简单的方案来实现也挺好。
如果真的要做的话,大概是这样:
- 先取一批图片,比如 20 张
- 用 线性分区算法 对这些数字进行分块,得到若干行(比如5行),每行的宽度和尽可能接近
- 按照宽度比例计算每张图片的宽度,并给图片设定宽度
- 此时图片不太能完全展示,所以要用
object-fit:cover
让其居中展示一部分
上面的 线性分区算法 可以参考:https://github.com/crispymtn/...
###