js实现瀑布流的三种方式比较


Posted in Javascript onJune 28, 2020

瀑布流是一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

js实现瀑布流的三种方式比较

瀑布流特点:

1、琳琅满目:整版以图片为主,大小不一的图片按照一定的规律排列。
2、唯美:图片的风格以唯美的图片为主。
3、操作简单:在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。

瀑布流布局实现方式:

1、传统多列浮动

js实现瀑布流的三种方式比较

  • · 各列固定宽度,并且左浮动;
  • · 一列中的数据块为一组,列中的每块依次排列;
  • · 更多数据加载时,需要分别插入到不同的列中;

优点:

      布局简单,应该说没啥特别的难点;

      不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。

缺点:

      列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;

      滚动加载更多数据时,还要指定插入到第几列中,还是不方便。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>传统多列浮动</title>
 <style>
 div{
 float:left;
 margin: 5px 5px 5px 5px;
 }
 p{
 background: #90EE90;
 width:160px;
 text-align:center;
 }
 </style>
</head>
<body>
 <div>
 <p style="height:230px;">a1</p>
 <p style="height:100px;">a2</p>
 </div>
 
 <div>
 <p style="height:100px;">a3</p>
 <p style="height:300px;">a4</p>
 </div>

 <div>
 <p style="height:250px;">a5</p>
 <p style="height:200px;">a6</p>
 </div>
</body>
</html>

效果:

js实现瀑布流的三种方式比较

2、CSS3 样式定义

js实现瀑布流的三种方式比较

优点:

      直接 CSS 定义,最方便了;

      扩展方便,直接往容器里添加内容即可。

缺点:

      只有高级浏览器中才能使用;

      还有一个缺点,他的数据块排列是从上到下排列到一定高度后,再把剩余元素依次添加到下一列,这个本质上就不一样了;

      鉴于这两个主要缺点,注定了该方法只能局限于高端浏览器,而且,更适合于文字多栏排列。

示例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
 .container{
 -webkit-column-width:160px;
 -moz-column-width:160px;
 -o-colum-width:160px;
 -webkit-column-gap:1px;
 -moz-column-gap:1px;
 -o-column-gap:1px;
 }
 div:not(.container){
 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;
 background:#90EE90;
 border::#CCC 1px solid;
 display:inline-block;
 width:157px;
 position:relative;
 margin:2px;
 }
 .title{
  line-height:80px; font-size:18px; color:#999;
  text-align:center;
  font-family:"Microsoft YaHei";
 }
</style>
</head>

<body>
<section>
 <div class="container">
 <div style="height:80px" class="title">纯CSS3瀑布布局</div>
 <div style="height:260px"></div>
 <div style="height:65px"></div>
 <div style="height:120px"></div>
 <div style="height:145px"></div>
 <div style="height:90px"></div>
 <div style="height:145px"></div>
 <div style="height:160px"></div>
 <div style="height:65px"></div>
 <div style="height:230px"></div>
 <div style="height:140px"></div>
 <div style="height:85px"></div>
 <div style="height:20px"></div>
 <div style="height:145px"></div>
 <div style="height:50px"></div>
 <div style="height:65px"></div>
 <div style="height:230px"></div>
 <div style="height:140px"></div>
 <div style="height:85px"></div>
 <div style="height:20px"></div>
 <div style="height:145px"></div>
 <div style="height:50px"></div>
 <div style="height:145px"></div>
 <div style="height:160px"></div>
 <div style="height:240px"></div>
 </div>
</section>
</body>
</html>

效果:

js实现瀑布流的三种方式比较

3、绝对定位

最优的一种方案,方便添加数据内容,窗口变化,列数/数据块都会自动调整;

优点:
      方便添加数据内容,窗口变化,列数/数据块都会自动调整;

缺点:

      需要实现知道数据块高度,如果其中包含图片,需要知道图片高度;

      JS 动态计算数据块位置,当窗口缩放频繁,可能会狂耗性能。

思路:

1) 数据块排列(对容器中已有元素进行排列),算法步骤简述下:
设置(块元素宽度一致)
· 初始化时,对容器中已有数据块元素进行第一次计算,需要用户给定: a,容器元素 — 以此获取窗口总宽度; b,列宽度(块元素宽度); c,最小列数;
·计算显示列数:窗口宽度除以一个块框宽度向下取整,并设置waterfall显示的居中
·存储每列的高度
· 获得列数后,需要保存每个列的当前高度,这样在添加每个数据块时,才知道起始高度是多少;
· 依次取容器中的所有数据块,先寻找当前高度最小的某列,之后根据列序号,确定数据块的left,top值,left 为所在列的序号乘以列宽,top 为所在列的当前高度,最后更新所在列的当前高度加上这个数据块元素的高度,至此,插入一个元素结束;
· 当所有元素插入完毕后,调整容器的高度为各列最大的高度值,结束依次调整。

2) 异步加载数据,包含两个步骤:
· 绑定滚动事件,并确定预加载线高度值,即滚动到哪个高度后,需要去加载数据,其实这个就是列的最小高度值,这样当前滚动值和最小高度值比较一下即可判断出来,是否要触发加载数据;
· 加载数据,函数传参,能提供加载数据函数和停止加载(加载多少时停止)函数,以更方便的控制。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
详解AngularJS中自定义过滤器
Dec 28 #Javascript
js运动应用实例解析
Dec 28 #Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
浅析JS运动
Dec 28 #Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 #Javascript
js时间戳转为日期格式的方法
Dec 28 #Javascript
jquery实现全屏滚动
Dec 28 #Javascript
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
解析php5配置使用pdo
2013/07/03 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
Javascript面向对象编程
2012/03/18 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python中for循环控制语句用法实例
2015/06/02 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
全网非常详细的pytest配置文件
2022/07/15 Python