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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
js的一些常用方法小结
Jun 29 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
Node.js+Express配置入门教程
May 19 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
用node.js写一个jenkins发版脚本
May 21 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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开启gzip页面压缩实例代码
2010/03/11 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
js操作table示例(个人心得)
2013/11/29 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python获取本地计算机名字的方法
2015/04/29 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python 容器总结整理
2017/04/04 Python
Django实现组合搜索的方法示例
2018/01/23 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
kfc实习自我鉴定
2013/12/14 职场文书
劳资人员岗位职责
2013/12/19 职场文书
《小摄影师》教学反思
2016/02/18 职场文书