css瀑布流怎么可以横排?

css瀑布流怎么可以横排?下面本篇文章给大家介绍一下Css3实现百度图片的横向瀑布流布局的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

在此先上个效果图:

1.png

(希望不要吐槽里面的小哥哥)下面正题:

用的框架是vue,v-for一下:

<section>
  // v-for就是根据imagesList数组去循环下面这个div部分。
  <div class="img-wrapper" v-for="(item, index) in imagesList" :key="index">
    <img class="img" :src="item.img" />
    <div class="info">
      <span class="size">helloworld</span>
    </div>
  </div>
</section>

重点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的计算,所以有一个缺点 就是有一些图片他其实是有缺失的,

原图:

1.png

被迫部分缺失的:

2.png

一、此处用到了flex布局:

先了解一波flex,阮一峰老师的flex布局教程(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?%5E%25$)

flex-wrap: wrap;

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

wrap值即是:换行,第一行在上方。

3.jpg

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

flex-grow: 1;

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

bg2015071014.png

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

3.png

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

二、min-width:100%

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

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

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

4.png

三、object-fit: cover

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

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

如果这条缺少会呈现这种效果,这里是张鑫旭老师一篇关于object-fit的文章(https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/)

5.png

这里要注意!!!!!object-fit有部分的浏览器是不兼容他的!!

解决object-fit兼容性问题

两个方案:

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

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

<section>
  <div class="img-wrapper" v-for="(item, index) in imagesList" :key="index" @click="clickImage(index)">
    <div class="img" :style="'backgroundImage: url('+item.img+');'">// 在这里控制背景图片
      <img :src="item.img" alt="" srcset="">
    </div>
    ……
  </div>
</section>

在这里再图片外面加一个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:

<section>
    <div class="img-wrapper" v-for="(item, index) in imagesList" :key="index" @click="clickImage(index)">
        <div class="img" :style="'backgroundImage: url('+item.img+');'">
            img :src="item.img" alt="" srcset="">
        </div>
        <div class="info">
            <span class="size">500×300</span>
            <img src="@/assets/images/photoes/save.png" alt="" srcset="">
        </div>
    </div>
</section>

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

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是css瀑布流怎么可以横排?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏