大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

web前端入门到实战:纯CSS瀑布流与JS瀑布流

瀑布流

创新互联是一家集网站建设,高坪企业网站建设,高坪品牌网站建设,网站定制,高坪网站建设报价,网络营销,网络优化,高坪网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

web前端入门到实战:纯CSS瀑布流与JS瀑布流

为什么使用瀑布流

瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个APP至上的时代,瀑布流可以提供很好的用户体验,通过结合下拉刷新,上拉加载进行数据的懒加载等操作,对于用户的体验感来说是接近于满分的!

瀑布流的特点

其实瀑布流的特点就是参差不齐的排列方式,以及流式布局的扩展性,可以通过界面展示给用户多条数据,并且让用户可以有向下浏览的冲动。

瀑布流的代码实现

1.纯 css 瀑布流:( multi-columns 方法 )

// 这里是第一次接触到 column-columns 这个属性,这是一个可以设置将div元素中的文本分成几列

//默认值是:auto

//写法:

column-count:3;
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome /

/ 注意:IE9及更早 IE 版本浏览器不支持 column-count 属性 /

//这里还会用到另一个属性 column-gap,用来调整边距,实现瀑布流布局

html结构代码如下:

学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
1
2
3
4
5
6
7
8
9
10
11
12

CSS代码如下:

.demo-1{ 
       -moz-column-count:3; /* Firefox */
       -webkit-column-count:3; /* Safari 和 Chrome */
       column-count:3;
       -moz-column-gap: 1em;
       -webkit-column-gap: 1em;
       column-gap: 1em;
       width: 80%;
       margin:0 auto;
    }
    .item { 
        padding: 2em;
        margin-bottom: 2em;
        -webkit-column-break-inside: avoid;
        break-inside: avoid; /*防止断点*/
        background: #ccc;
        text-align: center;
    }

效果图:

web前端入门到实战:纯CSS瀑布流与JS瀑布流

这里有个弊端,这并不符合瀑布流的原理,如果使用纯css写瀑布流,则每一块都是从上往下排列,不能做到从左到右排列,并且不会识别哪一块图片放在哪个地方合适,若是再配合动态加载,效果会特别不好,所以只能通过JS来实现瀑布流。

那么这里用图片来分析一下我们想要的瀑布流是什么样的。

瀑布流的位置分析图解

如下方图片。假设一排放5张图片。当第一排排满足够多的等宽图片时,显示的是这样的。那么假如我们要放第6张图片的时候,应该放在什么位置呢?

web前端入门到实战:纯CSS瀑布流与JS瀑布流

如果按照我们的正常逻辑来想,应该是放在第一张图片下面,依次水平排列过去(如下图)

web前端入门到实战:纯CSS瀑布流与JS瀑布流

但现实并非如此!在瀑布流中,从第2行开始,接下去的每一张图片都会放在上行中高度最低的那一列图片下方。(如下图)

web前端入门到实战:纯CSS瀑布流与JS瀑布流

为什么呢?因为放置它之前,这一列的高度为所有列中最小,所以会放置在这个地方。

那么如果再继续放置下去,第七张图片应该放在第三列图片下方,以此类推。

web前端入门到实战:纯CSS瀑布流与JS瀑布流

所以每次加载图片时,会需要判断哪一列的图片累计的高度最小,那么下一张图片就放在哪一列,即瀑布流算法去判断图片的确定位置。

JS代码实现

实现思路:

  1. 设定每一列图片的宽度和间距
  2. 获取当前窗口的总宽度,从而根据图片宽度去旁段分成几列
  3. 获取所有图片元素,定义一个空数组来保存高度
  4. 遍历所有容器,开始判断  当页面加载完成,或页面宽度发生变化时,调用函数。
    • 如果当前处于第一行时: 直接设置图片位置【 即 top为间距的大小,left为(当前图片的宽度+间距) * 当前图片的值+间距大小 】,并保存当前元素高度。
    • 如果当前不处于第一行时:进行高度对比,通过遍历循环,拿到最小高度和相对应的索引,设置图片位置【 即 top为最小高度值+间距2,left为 (当前图片的宽度+间距) 索引 值+间距大小)】,并修改当前索引的高度为当前元素高度。
  5. 当页面加载完成,或页面宽度发生变化时,调用函数。

代码实现


学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

最终效果图:

web前端入门到实战:纯CSS瀑布流与JS瀑布流

总结瀑布流布局原理

  • 设置图片宽度一致
  • 根据浏览器宽度以及每列宽度计算出列表个数,列表默认0
  • 当图片加载完成,所有图片依次放置在最小的列数下面
  • 父容器高度取列表数组的最大值

引申知识点

  • let,const以及var三者的区别
  • 滚动加载图片(懒加载原理)
  • 反撇号(`)基础知识
  • style和style.cssTest 的区别

名称栏目:web前端入门到实战:纯CSS瀑布流与JS瀑布流
标题URL:http://dzwzjz.com/article/jjdhec.html
在线咨询
服务热线
服务热线:028-86922220
TOP