写点什么

css 实现瀑布流效果

  • 2023-04-21
    广东
  • 本文字数:1092 字

    阅读完需:约 4 分钟

css实现瀑布流效果

前言

有一种很受图片网站欢迎的版面布局方式,叫做 Masonry Layout,翻译为瀑布流效果,这种排版方式的特性就是内容由多个不同高度的方块组成,而版面切割为多个直行,这些方格在每一个直行中一个接一个排列,所以看起来行与行之间会有一些不整齐的感觉


要制作这种版面布局最容易最方便就是直接加载别人写好的 js 代码,例如 Masonry.js,Isotope.js 等等,原理是通过 js 计算由多少个方格,再计算每一个方格的宽高,将全部方格的 position 都设为 absolute,注意计算出它的 top 和 left 去定位


而我们要使用纯 css 来制作瀑布流效果

Css column

第一种方法就是使用 2 个 css 属性,column-countcolumn-gap


首先就是 html 结构,建立一个 div,class 是 masonry,里面再建立一个 div,class 是 item,.item 里放入一个图片,新增十多份.item,图片的尺寸也随机调整一下


<div class="masinry">    <div class="item">      <img src="https://picsum.photos/360/480?random=1" alt="">    </div>    <div class="item">      <img src="https://picsum.photos/360/420?random=2" alt="">    </div>    ...多个.item</div>
复制代码


然后为 class 为 masinry 的 div 设置column-countcolumn-gap,此时版面已经分为了四个直行了,给 calss 为 item 的 div 设置 padding 并为里面的 img 设置 display:block、width:100%和 height:auto,这样图片就会因父元素容器的大小而缩放了


body{    margin: 4px;    font-family: Helvetica;}.masinry{    column-count: 4;    column-gap: 0;}
复制代码


可以看到图片已经排成瀑布流的样子了



不过图片的排列是从上往下排列的而不是从左往右,我们想根据时间来排列这样的排列顺序就未必合适了,这就是使用 css column 的限制

flexbox

第二个方法就是 flexbox 了,html 还用上面的结构,只需将 css 稍改一下


.masinry{ //内容由上至下排列,容器的高度少于内容的高度时就换行,也就是向右排列    display: flex;    flex-direction: column;    flex-wrap: wrap;    height: 1000px;}
.item{ position: relative; width: 25%; padding: 2px; box-sizing: border-box;}
.item img{ display: block; width: 100%; height: auto;}
复制代码


不过使用 flexbox 也是从上至下排列的,但是 flexbox 里的元素可以套用一个叫 order 的设定值,让它可以不跟随 HTML 结构顺序来排列


.item:nth-child(4n+1){    order: 1;}
.item:nth-child(4n+2){ order: 2;}
.item:nth-child(4n+3){ order: 3;}
.item:nth-child(4n){ order: 4;}
复制代码


现在 flexbox 里的元素实现了瀑布流效果也不跟随 HTML 结构顺序来排列,不过使用 flexbox 有一个较大的缺点,就是要设定容器的高度



发布于: 刚刚阅读数: 3
用户头像

你若毁我天堂,我必戳你脊梁 2022-11-01 加入

还未添加个人简介

评论

发布
暂无评论
css实现瀑布流效果_CSS_格斗家不爱在外太空沉思_InfoQ写作社区