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.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
js检测输入内容全为空格的方法
May 03 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
Vue简单实现原理详解
May 07 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
python解析xml文件实例分析
2015/05/27 Python
星球大战与Python之间的那些事
2016/01/07 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python游戏地图最短路径求解
2019/01/16 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
10条PHP编程习惯
2014/05/26 面试题
实习生自我鉴定
2013/12/12 职场文书
毕业生的自我评价
2013/12/30 职场文书
双语教学实施方案
2014/03/23 职场文书
5s标语大全
2014/06/23 职场文书
股东授权委托书
2014/10/15 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
小学重阳节活动总结
2015/03/24 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
Mysql超详细讲解死锁问题的理解
2022/04/01 MySQL
Promise静态四兄弟实现示例详解
2022/07/07 Javascript
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers