实现方式
虽然实现方式很简单,但是我起初没有想到,也是绕了很远的路才想到。当你看到下面的解决方案的时候,请不要说我sb,因为我确实是没有想起来,太久没有学习前端知识,很多属性基本没有见过。
-
使用css3的
column-*
属性- column-width
- column-count
- column-gap
如果熟悉css3的朋友可能一下子就想起来了,但是我并没有 我是绕了一大圈才想起来
- 实现方式
column-count: 用于分割几列,这样你就可以通过直接设置几列,而不用担心屏幕宽度,当然这里有个坑哈,就是图片自适应!
column-gap: 间距不提。
至于几个属性的使用,建议自己w3c一下
心酸历程
-
-
常规的瀑布流实现方式 前端工程师看到瀑布流的时候,会想到很对js库,或者jquery库,这些库的实现原理大同小异,基本上都是使用了“绝对定位”进行计算布局。
-
我的弯路 我毫不犹豫的想要按照常规的瀑布实现方式,但是没有办法实现那么多dom层级嵌套计算,所以想了很久没有想通,才跳回到纯css路线的,后面搜索发现了column-*属性,所以才浪费了很长时间。