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 相关文章推荐
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
layui分页效果实现代码
May 19 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
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
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
JS面向对象编程浅析
2011/08/28 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
numpy自动生成数组详解
2017/12/15 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
python deque模块简单使用代码实例
2020/03/12 Python
应届生体育教师自荐信
2013/10/03 职场文书
应届毕业生自我鉴定范文
2013/12/27 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
社区清明节活动总结
2014/07/04 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
2015年党小组工作总结
2015/05/26 职场文书
七年级作文之英语老师
2019/10/28 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
Django Paginator分页器的使用示例
2021/06/23 Python
图文详解matlab原始处理图像几何变换
2021/07/09 Python
JS setTimeout与setInterval的区别
2022/04/20 Javascript