likes
comments
collection
share

高级CSS属性实现的瀑布流的三种方法

作者站长头像
站长
· 阅读数 21

前言

首先我么来介绍介绍什么是瀑布流,瀑布流又称瀑布流式布局,是一种多列等宽不等高的一种页面布局方式。视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局会不断加载数据并附加至当前的尾部。是一种多列等宽不等高的一种页面布局方式,用于图片比较复杂,图片尺寸比较复杂时可以使用的一种展示方式,这种展示方式可以使页面比较美观,让人有种错落有致的感觉。

瀑布流是一种允许用户不断往下滑动,页面自动刷新呈现内容的交互形式。瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。其优缺点如下:

优点如下:

  • 节省空间,外表美观,更有艺术性。
  • 对于触屏设备非常友好,通过向上滑动浏览
  • 用户浏览时的观赏和思维不容易被打断,留存更容易。

缺点如下:

  • 用户无法了解内容总长度,对内容没有宏观掌控。
  • 用户无法了解现在所处的具体位置,不知道离终点还有多远。
  • 回溯时不容易定位到之前看到的内容。
  • 容易造成页面加载的负荷。
  • 容易造成用户浏览的疲劳,没有短暂的休息时间。

多栏布局实现瀑布流

我们来看这段代码,我们是直接给最外层容器加入cloumn-count:3属性,将其分为三栏,然后加入column-gap调整每栏的之间的间距,除此之外我们还给item子容器加入了break-inside:avoid来保证每个子元素渲染完在换行。 高级CSS属性实现的瀑布流的三种方法

网格布局实现瀑布流

我们再来看你这段代码,首先是将外层wrap容器设置为grid网格布局,在用grid-template-columns: 1fr 1fr 1fr属性将其分为三栏,在用grid-auto-rows设置网格内行的尺寸,最后用column-gap设置网格每栏的间隙。在这段网格布局中,我们还写了一段js用来获取照片的宽高用来设置每张照片占多少行,给item添加了item.style.gridRowEnd = span ${~~(height)}属性,以便确认每张照片占网格的行数, 高级CSS属性实现的瀑布流的三种方法

弹性布局实现瀑布流

我们接着看这段代码,这段代码是利用了弹性布局的巧妙性,在最外层先用了一层div包裹,然后里面再用一层div包裹项目,将外层div横向弹性布局且默认一行。内层div则设为纵向弹性布局,实现瀑布流布局。 高级CSS属性实现的瀑布流的三种方法

结语

这三种实现瀑布流布局都是用高级的css属性来实现的,比直接用js写会去获取每张图片的高度在进行布局会简单许多,但是各有各的有优缺点,我们根据场景合理的使用。

转载自:https://juejin.cn/post/7137303763269713934
评论
请登录