图片的不规则布局问题？

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;
}

Answer 2

木桶布局，实现原理及实例请看
http://www.jianshu.com/p/57ac...

Answer 3

请使用masonry.js

Answer 4

图片在哪里看到，直接查看网页源代码，调试一下，找出影响的css就知道了，如果不是css就是js控制的

Answer 5

这个布局大概率会使用flex吧，一般而言这样的排版会要求图片的固定尺寸或者宽高比【上传者自己修剪、使用background-clip裁剪或者后端进行比例裁剪】，

1. 不知道是不是题主想问的，前端很难判断图片是横竖翻转了，

2. 尺寸不应该按照设计稿来吗？

3. 这里应该不用考虑横竖啊，不是上传是啥就是啥吗？

以上答案可能不是题主要的，题主是不是设计得是每一排不知道放多少图片？每一排有多少横竖？这样的话题主只要考虑总体的宽高是否固定，使用flex布局比较方便，会自动缩放和换行。

Answer 6

object-fit属性

Answer 7

以前看过类似的文章讲解百度图片展现页面的，原理不难