六月 13, 2018

纯CSS实现宫格高宽相等的布局

在实际的项目中,可能会有如下需求:要实现一个9宫格的布局,并且每个格子的高宽相等。比如下图所示:

在现有的flex布局下,要实现9宫格布局是非常简单的。但是要想同时实现高宽相等那就有点复杂了。
一般的做法就是采用js来动态计算,再搭配计算缓存的方式来提高性能。这种方法就不多介绍了,反正网上搜索相关的教程一大堆。
这次我准备了一种非常规方法,可以使用纯CSS的方式来实现类似的布局。这种方法说白了其实很简单,就是使用一张1*1像素的透明图片来实现。因为图片在加载完毕后浏览器会自动按照图片的size比例来自动撑满高度或者宽度来达到等比例放大的效果。因此利用这个特性,可以自动实现等高宽的效果。

可以直接点击看下效果:

不过这种方式并不是没有问题。相对于js动态计算来说,并没有简化实现过程。甚至略显复杂,但是好处在于,这种方式会自动随着屏幕高宽的改变而自动自适应1:1等比缩放,这在手机这种可以横竖屏切换的应用场景特别有用,如果采用js方式的话还得监控屏幕高宽的改变事件,然后再重新改变元素的高度。

还有一个问题是,毕竟引入了图片元素,渲染的时候对于性能可能会有一定的影响,但是这些影响配合一些优化措施实际可以忽略不计。1*1像素的图片完全不需要以url的形式来加载可以直接以base64字符串的方式加载出来,这样也就无需图片预加载了。如果配合vue等框架做成组件的话那就可以造一个轮子了。

Posted in web

发表评论

电子邮件地址不会被公开。 必填项已用*标注