flex布局(图片自适应展示)

实现效果

实现方式

我是利用flex布局来控制的.

这样子写的话会有一个问题，因为space-between是两端布局，若是一行的图片没有5个的话，他中间的间距会拉大，不会一直保持这个间距自适应。
最后加了一个计算的方法，来判断图片是否撑满了一行，若是没有撑满一行，则我们生成div，将图片撑满。

js:

/**flex布局计算一行放多少个，没放满往前挤
         * PIC_WIDTH: 图片的宽度
         * TOTAL: 代表你这一页展示多少个图片
         * w: 屏幕的宽度
         */
        caculate() {
            const PIC_WIDTH = 218;
            const TOTAL = this.posterData.length; // 这个是后端返回的一页的数据
            const PIC_MARGIN = 25;
            const w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            const count_in_row = parseInt((w || 1080) / (PIC_WIDTH + PIC_MARGIN)); // 一行放多少个,这里是5个
            const I = parseInt(TOTAL % count_in_row);
            const need_placeholder_count = I ? count_in_row - I : 0;
            this.allCount = parseInt(need_placeholder_count);
        },

html:

<div v-for="index in allCount" :key="`pick${index}`" class="pick"></div>

css:

.pick {
            content: '';
            width: $imgW;
            margin-right: 25px;
        }