JavaScript实现瀑布流以及加载效果


Posted in Javascript onFebruary 11, 2017

一、瀑布流是个啥?

瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在“很久”以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便。

JavaScript实现瀑布流以及加载效果

二、瀑布流的优缺点

优点:

1.节省了页面的空间,不再需要导航和页码按钮。

2.增强了用户的体验,使用户的体验更多的是在于浏览图片上,而不是在寻找怎么找下一页和切换的操作上。

缺点:

1.使用的网页类型有限:

这种瀑布流布局只适用于某些特定类型产品中一部分特定类型的内容。

比如我们在某宝买东西时,我们就需要记住第几页的哪个商品是我们想买的,然后再回头购买,这时候就需要我们的页面按钮来帮忙记忆,瀑布流反而更加麻烦。

2.永远看不到的页脚:

如果我们使用瀑布流无限滚动加载模式,那就是说我们永远也无法看到我们的页脚,当用户一次次的浏览到页面底部,看到页脚,却因为自动加载的内容的突然出现,无论怎样都无法点击到页脚中的链接或登录时,那么用户的体验是极为糟糕的,他们可能会愤怒的关掉你的网页。

3.关于页面数量:

对于用户来说,使用瀑布流自动加载来替代传统的换页其实是很方便的,而对于开发者的网站来说,页面的减少可能就无法展示更多地相关信息,最明显的就是广告减少。

三、瀑布流写法及原理

瀑布流到底长什么样子呢,那我们现在就来默写一个简单的瀑布流布局。先把乱七八糟的基础样式和布局稍微的敲一下~这里我们为了节省空间,就不缩进啦~

CSS:

*{margin: 0;padding: 0;} 
#wrap{width: 840px;margin: 0 auto;border: 1px solid black;overflow: hidden;}
#wrap ul{width: 200px;margin: 0 5px;float: left;}
#wrap ul li{width: 200px;list-style: none;margin: 10px 0;background: palegreen;font-size: 50px;color: white;text-align: center;}

HTML:

<div id="wrap">
 <ul></ul>
 <ul></ul>
 <ul></ul>
 <ul></ul>
</div>

以下是简单的JS代码:

var wrap=document.querySelector("#wrap");
var ul=document.querySelectorAll("#wrap ul");//声明元素块
//先创建一个随机数的函数
function ranDom(min,max){
 return Math.random()*(max-min+1)+min;
}
//再创建一个添加li的函数
function createLi(num){
 for(var i=0;i<num;i++){
  var newLi=document.createElement("li");//创建li
  newLi.style.height=ranDom(100,400)+"px";//使用随机数函数创建高度不同的li
  var arrul=[];
//将ul的高度进行储存和比较
  for(var j=0;j<ul.length;j++){
   arrul.push(ul[j].offsetHeight);//储存ul的高度
  }
  var minHeight=arrul[0];
  var minIndex=0;
  for(var k=0;k<arrul.length;k++){
   if(minHeight>arrul[k]){
    minHeight=arrul[k];//比较出高度最短的ul然后赋值给minHeight
    minIndex=k;//把高度最短的ul所在下标赋值给minIndex
   }
  }
 ul[minIndex].appendChild(newLi);//向高度最短的ul里添加li
 } 
}
createLi(15);//执行函数,添加15个li,
//创建一个滚动事件
window.onscroll=function(){ 
// html总高度-可视化窗口高度=body的滚动高度
//兼容写法 
 var scrollTop=document.body.scrollTop; 
 var clientHeight=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight; 
 if(document.documentElement.offsetHeight-clientHeight<=scrollTop){ 
  createLi(15); 
 } 
}
//当滚动快要到达底部,还没有到达的时候,再去执行函数,创建新的li

这样我们就实现了永远也看不到页脚的自动加载瀑布流布局。

四、总结

瀑布流简单来讲就是页面容器内的多个高度不固定的容器之间参差不齐的添加内容,鼠标滚动时不断在容器内的尾部加载数据,且自动加载到空缺位置,也就是例子中的高度最短的位置,不断循环。

瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里自动加载又避免了用户鼠标点击的翻页操作。

瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式,巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳,同时给人以不拘一格的感觉。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
js格式化时间的方法
Dec 18 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
微信JS接口大全
Aug 25 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
JavaScript表单验证的两种实现方法
Feb 11 #Javascript
jQuery实现复制到粘贴板功能
Feb 11 #Javascript
js实现PC端和移动端刮卡效果
Mar 27 #Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 #Javascript
BootStrap select2 动态改变值的方法
Feb 10 #Javascript
angularjs实现的前端分页控件示例
Feb 10 #Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
You might like
CodeIgniter基本配置详细介绍
2013/11/12 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
Python进程间通信用法实例
2015/06/04 Python
python Tkinter版学生管理系统
2019/02/20 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python计算导数并绘图的实例
2020/02/29 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
婚庆公司计划书
2014/09/15 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
房屋租赁协议书
2014/10/18 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
党校培训学习心得体会
2016/01/06 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书