图片的不规则布局问题？

Question

如上三张截图中的图片布局如何实现？图片随便上传，横版图片希望上传后，依旧横版显示，竖版图片依旧竖版显示，横竖版随意组合，图片尽可能显示完整；遇到的问题：1.横竖版图片的判断问题？（图片必须预载或者预先知道长宽吗？）2.横竖混合排放时，横版图片的宽度设置多少，竖版设置多少，横竖版图片个数如何确定？3.横竖混合时，竖版图片的高度如何与横版等高？另一个解决方案 ： https://github.com/xieranmaya...；中文翻译 ： https://zhuanlan.zhihu.com/p/...

Answer 1

flex就可以完美搞定

html：

<div class="m-gallery">

    <div class="item"><img src=""></div>

    <div class="item"><img src=""></div>

    <div class="item"><img src=""></div>

    ......

</div>

css:

.m-gallery{

   display: flex;

  // 采用flex布局

  flex-wrap: wrap;

  // 规定一行放不下flex元素时自动换行

}

.m-gallery .item{

  height: 100px;

  flex-grow: 1;

  // 每个flex元素占的宽度相同

  margin: 2px;

}

.m-gallery .item img{

  height: 100px;

  min-width: 100%;

  max-width: 100%;

  object-fit: cover;

  // 使图片等比拉伸，可能会被裁减

  vertical-align: bottom;

  display: block;

}