返回文章
ARTICLE
图片的模糊加载、多列布局和瀑布布局
个人做的工具类项目，会不断补充新的前端可用工具、文档、新技术等 原理是采用模糊图片替换模式加载，先加载缩略图，再利用动画替换。 如利用 webp 格式替换 png 图片，webp 格式图片一般都能 缩小几十上百倍，所以非常适合作为图片加载前模糊效果缩略图 而 [cwebp](https://developers.google.com/speed/w
图片的模糊加载、多列布局和瀑布布局
个人做的工具类项目，会不断补充新的前端可用工具、文档、新技术等
图片加载
原理是采用模糊图片替换模式加载，先加载缩略图，再利用动画替换。
如利用 webp 格式替换 png 图片，webp 格式图片一般都能 缩小几十上百倍，所以非常适合作为图片加载前模糊效果缩略图
而 cwebp 可以参考官网，
cwebp 的操作方法主要是将工具下载解压后，进入项目地址通过命令行进行图片类型转换，示例命令如下
* cwebp用于将其他格式图片转换为webp格式，使用方法如下：
cwebp [options] -q quality input.png -o output.webp
其中option可选：-loss(有损压缩，默认），-lossless(无损压缩）
-q：质量指数（压缩率），有损压缩有效，无损压缩忽略
input.png：待转换图片
-o：输入图片名称格式。
如：cwebp [-loss] -q 30 quality 1.png -o 2.webp
* dwebp用于将webp格式保存为png文件，使用方法如下：
dwebp input.webp -o output.png -quiet
如：dwebp 3.webp -o 3.jpg -quiet
更多命令和参数配置可参考官网
由于这类加载代码量太大，有兴趣的可以到 github 上查看 模糊图片替换加载
多列布局和瀑布布局
在大量加载不规则图片时，布局就显得十分重要，这边提供了两种布局可供采纳
<template>
<div class="operator-btns">
<a-radio-group v-model:value="radioValue" size="large" button-style="solid">
<a-radio-button value="multiColumn">多列布局</a-radio-button>
<a-radio-button value="waterfall">瀑布布局</a-radio-button>
</a-radio-group>
</div>
<div v-if="radioValue === 'multiColumn'" class="public-multi-column">
<div v-for="item in imgList" :key="item" class="item"><img :src="item" alt="" /></div>
</div>
<div v-if="radioValue === 'waterfall'" class="public-waterfall">
<div v-for="item in imgList" :key="item" class="item"><img :src="item" alt="" /></div>
</div>
</template>
<script setup>
import { defineRouteMeta } from '@fesjs/fes';
import { ref } from 'vue';
defineRouteMeta({
name: 'index',
title: '首页',
});
const radioValue = ref('multiColumn');
const imgList = [
'https://img2.baidu.com/it/u=2335637867,3697443124&fm=253&fmt=auto&app=138&f=JPG?w=864&h=335',
'https://img2.baidu.com/it/u=2335637867,3697443124&fm=253&fmt=auto&app=138&f=JPG?w=864&h=335',
'https://img1.baidu.com/it/u=3987763978,3918181987&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=344',
'https://img2.baidu.com/it/u=3180787673,2876511483&fm=253&fmt=auto&app=138&f=PNG?w=500&h=201',
'https://img1.baidu.com/it/u=2219546896,1207324069&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=914',
'https://img2.baidu.com/it/u=62785874,714397132&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=2000',
'https://img1.baidu.com/it/u=1438507223,3158825307&fm=253&fmt=auto?w=448&h=499',
'https://img0.baidu.com/it/u=1411351938,2168146477&fm=253&fmt=auto?w=500&h=280',
'https://img2.baidu.com/it/u=3034226464,3392689819&fm=253&fmt=auto?w=382&h=652',
'https://img1.baidu.com/it/u=1347941211,1891338127&fm=253&fmt=auto?w=500&h=184',
'https://img0.baidu.com/it/u=3009506839,4103157977&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=763',
'https://img0.baidu.com/it/u=3133536309,760067492&fm=253&fmt=auto?w=92&h=69',
];
</script>
<style lang="less" scoped>
.operator-btns {
margin-bottom: 24px;
text-align: center;
}
</style>