等高不等宽的图片列表怎么布局

Question

像这种图片的高度一样 但是宽度不一致 怎么在加载列表的时候自动补到所缺的位置上去 看到的瀑布流插件都是等宽的计算方法 有没有类似的插件能实现这种效果 列表数量和图片的排序都是不定的

Answer 1

<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>

Answer 2

这个功能我做过，比你想象中的要复杂。建议做一下取舍，如果不是很必要的话，换用一些简单的方案来实现也挺好。

如果真的要做的话，大概是这样：

1. 先取一批图片，比如 20 张
2. 用 线性分区算法 对这些数字进行分块，得到若干行（比如5行），每行的宽度和尽可能接近
3. 按照宽度比例计算每张图片的宽度，并给图片设定宽度
4. 此时图片不太能完全展示，所以要用 object-fit:cover 让其居中展示一部分

上面的 线性分区算法 可以参考：https://github.com/crispymtn/...

Answer 3

这个有现成的 http://flickr.github.io/justi...