css 实现瀑布流效果
前言
有一种很受图片网站欢迎的版面布局方式,叫做 Masonry Layout,翻译为瀑布流效果,这种排版方式的特性就是内容由多个不同高度的方块组成,而版面切割为多个直行,这些方格在每一个直行中一个接一个排列,所以看起来行与行之间会有一些不整齐的感觉
要制作这种版面布局最容易最方便就是直接加载别人写好的 js 代码,例如 Masonry.js,Isotope.js 等等,原理是通过 js 计算由多少个方格,再计算每一个方格的宽高,将全部方格的 position 都设为 absolute,注意计算出它的 top 和 left 去定位
而我们要使用纯 css 来制作瀑布流效果
Css column
第一种方法就是使用 2 个 css 属性,column-count
和column-gap
首先就是 html 结构,建立一个 div,class 是 masonry,里面再建立一个 div,class 是 item,.item 里放入一个图片,新增十多份.item,图片的尺寸也随机调整一下
然后为 class 为 masinry 的 div 设置column-count
和column-gap
,此时版面已经分为了四个直行了,给 calss 为 item 的 div 设置 padding 并为里面的 img 设置 display:block、width:100%和 height:auto,这样图片就会因父元素容器的大小而缩放了
可以看到图片已经排成瀑布流的样子了
不过图片的排列是从上往下排列的而不是从左往右,我们想根据时间来排列这样的排列顺序就未必合适了,这就是使用 css column 的限制
flexbox
第二个方法就是 flexbox 了,html 还用上面的结构,只需将 css 稍改一下
不过使用 flexbox 也是从上至下排列的,但是 flexbox 里的元素可以套用一个叫 order 的设定值,让它可以不跟随 HTML 结构顺序来排列
现在 flexbox 里的元素实现了瀑布流效果也不跟随 HTML 结构顺序来排列,不过使用 flexbox 有一个较大的缺点,就是要设定容器的高度
版权声明: 本文为 InfoQ 作者【格斗家不爱在外太空沉思】的原创文章。
原文链接:【http://xie.infoq.cn/article/f21a73ae109226b44023b5186】。文章转载请联系作者。
评论