瀑布流
又称瀑布流式布局,是比较流行的一种网站页面布局方式 。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置 。
文章插图
为什么使用瀑布流
瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个App至上的时代,瀑布流可以提供很好的用户体验,通过结合下拉刷新,上拉加载进行数据的懒加载等操作,对于用户的体验感来说是接近于满分的!
瀑布流的特点
其实瀑布流的特点就是参差不齐的排列方式,以及流式布局的扩展性,可以通过界面展示给用户多条数据,并且让用户可以有向下浏览的冲动 。
瀑布流的代码实现
1.纯 css 瀑布流:( multi-columns 方法 )
// 这里是第一次接触到 column-columns 这个属性,这是一个可以设置将div元素中的文本分成几列
//默认值是:auto
//写法:
column-count:3;
-moz-column-count:3; /* Firefox
推荐阅读
- javascript实现web通讯的几种方式
- 常见的Web安全漏洞及测试方法介绍
- Webview加载H5优化小记
- 什么是Web应用程序防火墙WAF?
- 从 Windows 到 Mac:这份指南让你快速上手、轻松入门
- 翡翠|翡翠原石的入门常识必知!
- Spring Boot 入门学习指南
- 「技术架构」在5分钟把前端应用程序安装到NGINX
- python使用Bottle来提供一个简单的web服务!
- Web前端和Java开发哪个薪资更高,发展前景更好?