图片的不规则布局问题？

Question

如上三张截图中的图片布局如何实现？

图片随便上传，横版图片希望上传后，依旧横版显示，竖版图片依旧竖版显示，横竖版随意组合，图片尽可能显示完整；

遇到的问题：
1.横竖版图片的判断问题？（图片必须预载或者预先知道长宽吗？）
2.横竖混合排放时，横版图片的宽度设置多少，竖版设置多少，横竖版图片个数如何确定？
3.横竖混合时，竖版图片的高度如何与横版等高？

另一个解决方案 ： https://github.com/xieranmaya...；
中文翻译 ： https://zhuanlan.zhihu.com/p/...

Answer 1

flex就可以完美搞定html：<div class="m-gallery">&nbsp; &nbsp; <div class="item"><img src=""></div>&nbsp; &nbsp; <div class="item"><img src=""></div>&nbsp; &nbsp; <div class="item"><img src=""></div>&nbsp; &nbsp; ......</div>css:.m-gallery{&nbsp; &nbsp;display: flex;&nbsp; // 采用flex布局&nbsp; flex-wrap: wrap;&nbsp; // 规定一行放不下flex元素时自动换行}.m-gallery .item{&nbsp; height: 100px;&nbsp; flex-grow: 1;&nbsp; // 每个flex元素占的宽度相同&nbsp; margin: 2px;}.m-gallery .item img{&nbsp; height: 100px;&nbsp; min-width: 100%;&nbsp; max-width: 100%;&nbsp; object-fit: cover;&nbsp; // 使图片等比拉伸，可能会被裁减&nbsp; vertical-align: bottom;&nbsp; display: block;}