Css3实现百度图片的横向瀑布流布局——内含解决object-fit兼容性问题

最近公司在做项目的时候需要用到横向瀑布流布局，在实现的过程中还遇到了object-fit兼容性问题，这里记录一下整个过程，想直接复制代码可以直接滚到底部。

在此先上个效果图：

（希望不要吐槽里面的小哥哥）下面正题：

用的框架是vue，v-for一下：

  // v-for就是根据imagesList数组去循环下面这个div部分。
  

    
    

      helloworld
    
  

重点css来了朋友们（这里是scss）：

section {
  display: flex; // 这里用到flex布局
  flex-wrap: wrap; // flex中换行的属性
  padding: 15px 5px;
  &::after{ // 用于最后一行最后的位置显示空白
    content: '';
    flex-grow: 99999;// 放到最大
  }
  .img-wrapper {
    flex-grow: 1; // 根据比例计算每个图片多长等分剩余空间（好难解释，下面用图解释）
    margin: 5px;
    position: relative;
    overflow: hidden; // 把多余的部分隐藏
    .img {
      height: 170px;
      min-width: 100%; // 要让左右的图片横向是充满他父级标签的宽度
      object-fit: cover; // 让图片不要压缩
    }
    .info{ // 选中时底部提示框
        position: absolute; 
        bottom: 4px;
        color: #ffffff;
        left: 0;
        right: 0;
        background-color: rgba(0,0,0,.3);
        line-height: 44px;
        height: 0px;
        
    }&:hover .info{ // 选中时底部弹出提示框动画
        height: 44px;
        transition: all 0.5s;
    }
  }
}

上面是所有代码，复制粘贴可以用啦（注意注意：这个方案存在兼容性问题，ie等一些浏览器不支持object-fit属性），下面做简单解析：

注意：这种方法没用到js的计算，所以有一个缺点 就是有一些图片他其实是有缺失的，

原图：

被迫部分缺失的：

一、此处用到了flex布局：

先了解一波flex，阮一峰老师的flex布局教程

flex-wrap: wrap;

flex-wrap属性定义，如果一条轴线排不下，如何换行

wrap值即是：换行，第一行在上方。

根据比例计算每个图片多长等分剩余空间：

flex-grow: 1;

flex-grow属性定义项目的放大比例，如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

如果在本项目中撤去这个属性，效果就会像下面这样：

所以这个flex-grow属性是为了等分剩余空间。

二、min-width：100%

这里提一下这个属性的重要性之处，

min-width: 100%; // 要让左右的图片横向是充满他父级标签的宽度

如果这条缺少会呈现这种效果，虽然其父级标签是等分了剩余空间，但是图片的横向没有充满父级标签，所以在这里我们需要用到这个属性来使其充满。

三、object-fit: cover

在上面的充满以后 有些图片是会被压缩的，所要要用到这个属性，保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

object-fit: cover; // 让图片不要压缩

如果这条缺少会呈现这种效果，这里是张鑫旭老师一篇关于object-fit的文章

这里要注意！！！！！object-fit有部分的浏览器是不兼容他的，下面贴一下张鑫旭老师的一张图：

解决object-fit兼容性问题

两个方案：

一、张鑫旭老师给出了一个决绝这问题的插件，github链接：https://github.com/anselmh/object-fit

二、但我在vue里面使用这个方法没有达到效果，最后我做出使用background-size和background-position替换object-fit：

  

    
// 在这里控制背景图片
      
    
    ……
  

在这里再图片外面加一个div包住它，css改动如下：

.img {
      //   object-fit: cover;
      background-size: cover; // background-size和background-position替换object-fit
      background-position: center;
      img {
        // 设置本来的img透明，使其显示出来的只是背景，但注意不能把img的src去掉，去掉的话flex-grow就无法等分剩余空间了。
        opacity: 0; 
        min-width: 100%;
        height: 210px;
      }
    }

有一个原则：能使用html/css解决的问题就不要使用JS，希望文章能帮助各位解决问题！

重要的几个属性都解释完了，其他的自己领悟哈，妹子喜欢小哥哥希望别介意 ^-^

最后完整代码

不存在兼容性问题的代码如下：

HTML：

    

        

            img :src="item.img" alt="" srcset="">
        
        

            500×300
            
        
    

css(scss):

section {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 5px;
  &::after {
    content: "";
    flex-grow: 99999;
  }
  .img-wrapper {
    flex-grow: 1;
    margin: 5px;
    position: relative;
    overflow: hidden;
    height: 210px;
    .img {
      //   object-fit: cover;
      background-size: cover;
      background-position: center;
      img {
        opacity: 0;
        min-width: 100%;
        height: 210px;
      }
    }
    .info {
      position: absolute;
      bottom: 0px;
      color: #ffffff;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.3);
      line-height: 44px;
      height: 0px;
    }
    &:hover .info {
      height: 44px;
      transition: all 0.5s;
    }
  }
}