75行代码完美实现图片完整展示 flex 横向瀑布流布局

布局特点

代码简单，完整代码仅仅75行
图片完整展示，不会被裁切，等比缩放，而非拉伸
以图片异步加载结束时间的顺序渲染图片，防止页面过大闪动
最后一行图片过少时，图片正常显示，不会缩放占满整行

tips: github 图片加载较慢正好可以观察图片加载渲染过程

在线预览(github) https://haolang.github.io/web/demo/500px/

在线预览(gitee) http://haolang.gitee.io/web/demo/500px/

效果如下

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>完美flex横向瀑布流布局</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>.primary {display: flex;flex-wrap: wrap;}/*占位元素，最后一行图片过少时，图片不缩放*/.primary::after {content: '';flex-grow: 999999999;min-width: 200px; /* 图片可以占满一行时保证换行，否则最后一行末尾可能会出现一小段空白 */height: 0;}.image-box {margin: 5px;display: block;}.image-box img {display: block;width: 100%;}</style>
</head>
<body>
<div id="app" class="primary"><divv-for="(image,key) in images":key="key"class="image-box":style="{      width: `${image.width * 200 / image.height}px`,
      flexGrow: image.width / image.height * 1000
    }"><img :src="data:image.src" alt=""></div>
</div>
</body>
<script>
new Vue({el: '#app',data() {return {imagesBaseUrl: './images',images: []}},methods: {getImage(imageSrc) {let img = new Image();img.src = imageSrc;//获取图片尺寸img.onload = () => {this.images.push({src: img.src,width: img.width,height: img.height});}}},mounted() {for (let i = 0; i < 28; i++) {const imageSrc = `${this.imagesBaseUrl}/i${i}.jpg`;this.getImage(imageSrc);}}
})
</script>
</html>

图片容器 image-box style 解释

width: ${image.width * 200 / image.height}px 保证图片高度以200px为基准
flexGrow: image.width/image.height * 1000 这行代码(image.width / image.height )部分可以理解为 (image.width/image.height) / (image.height/image.height)
即图片的高宽同时除以高度，图片高度均为1时，图片宽度即为整行所占比，即flex-grow的值,
结果乘以1000 防止 flex-grow 的值小于1，因为当浏览器窗口很窄时,出现只能一张图片单独占据一行的情况,若 flex-grow 的值小于1会导致图片收缩不能占满一行。

其他方案

1. 加载图片显示顺序始终一致,页面无大幅闪动

本例可以容易的修改图片为同步加载，但得不偿失，图片一张加载完毕再加载下一张，加载速度会变慢

2. 加载图片显示顺序始终一致,且不影响图片加载速度

想要保证图片顺序一致，this.imageArraySize.push 修改为通过索引 this.imageArraySize[i] 添加数据即可但是由于图片不断插入导致回流与重构，会导致页面在图片加载完毕之前不断闪动。

参考链接中的方案使用后台图片尺寸数据占位，防止页面闪动

参考链接

75行代码完美实现图片完整展示 flex 横向瀑布流布局相关推荐

sql相同顺序法和一次封锁法_不到75行代码，导出最高法指导案例到excel（一）...
2020年7月27日,最高法发布了<统一法律适用促进司法公正最高法发布加强类案检索的指导意见>,其中提及类案检索将在2020年7月31日开始试运行. 其中提到的的基本范围包含四个:1) ...
仿知乎列表广告栏：在RecyclerView中实现大图片完整展示的视差效果（优雅地插入全屏广告图）
github地址:https://github.com/wsj1024/RvParallaxImageView 欢迎star 一,前言在知乎和花生地铁app上看到过类似如下的效果: 在recyc ...
我是如何用10行代码搬运目标图片的？
嗯呢,你没看错,就是教你把一个路径下的所有目标图片搬运到制定路径下.有读者说:小詹你忽悠人吧,要搬运目标图片复制粘贴不就好了嘛,要什么代码,搬砖脑子秀逗了? 咳咳,对于目标文件夹复制粘贴当然可以,还简 ...
pytorch微调bert_北大、人大联合开源工具箱UER，3 行代码完美复现BERT、GPT
本文由AI研习社用户张正投稿,来稿见文末联系方式作者 | 张正单位 | 清华大学编辑 | Camel 现存的预训练模型中没有一种可以完美的适用于所有任务,这也给预训练模型的选择带来困难. 对于这 ...
python屏幕文字识别_学会python就是如此任性，15行代码搞定图片文字识别，附源码...
python作为一门高级编程语言,它的定位是优雅.明确和简单.阅读Python编写的代码感觉像在阅读英语一样,这让使用者可以专注于解决问题而不是去搞明白语言本身.Python虽然是基于C语言编写,但是 ...
Python 3，4行代码实现去除图片背景色，从此告别PS！！
python3实现去除图片背景色 1. removebg工具介绍 2. 去除一张图片的背景色 3. 去除多张图片的背景色最近博文更新的少,是因为小鱼在备考~~ 闲来无事,弄个证书玩完,关键,好处那是 ...
几行代码实现SpringBoot图片上传
首先创建一个SpringBoot项目. 创建一个SpringBoot项目创建成功后在静态志愿目录下会产生static template 目录当我们的SpringBoot项目启动时会自动配置好静态资 ...
vant组件实现上传图片裁剪_如何用 120 行代码，实现交互完整的拖拽上传组件？...
作者 | 前端劝退师责编 | 伍杏玲你将在该篇学到: 如何将现有组件改写为 React Hooks函数组件 useState.useEffect.useRef是如何替代原生命周期和Ref的. 一个 ...
3行代码Python解决图片清晰度识别，原来我们看到的不一定是这样
在通常情况下,图片是否清晰是个感性认识,同一个图,有可能你觉得还过得去,而别人会觉得不清晰,缺乏一个统一的标准.然而有一些算法可以去量化图片的清晰度,做到有章可循. 原理如果之前了解过信号处理,就会 ...

75行代码完美实现图片完整展示 flex 横向瀑布流布局

布局特点

其他方案

1. 加载图片显示顺序始终一致,页面无大幅闪动

2. 加载图片显示顺序始终一致,且不影响图片加载速度

75行代码完美实现图片完整展示 flex 横向瀑布流布局相关推荐

最新文章

热门文章

75行代码 完美实现图片完整展示 flex 横向瀑布流布局

布局特点

其他方案

1. 加载图片显示顺序始终一致,页面无大幅闪动

2. 加载图片显示顺序始终一致,且不影响图片加载速度

75行代码 完美实现图片完整展示 flex 横向瀑布流布局相关推荐

最新文章

热门文章

75行代码完美实现图片完整展示 flex 横向瀑布流布局

75行代码完美实现图片完整展示 flex 横向瀑布流布局相关推荐