没有合适的资源?快使用搜索试试~ 我知道了~
JavaScript实现瀑布流以及加载效果
1 下载量 194 浏览量
2020-10-20
11:16:30
上传
评论
收藏 78KB PDF 举报
温馨提示
试读
2页
主要为大家详细介绍了JavaScript实现瀑布流以及加载效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源详情
资源评论
资源推荐
JavaScript实现瀑布流以及加载效果实现瀑布流以及加载效果
主要为大家详细介绍了JavaScript实现瀑布流以及加载效果的相关资料,具有一定的参考价值,感兴趣的小伙伴
们可以参考一下
一、瀑布流是个啥?一、瀑布流是个啥?
瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不
断加载数据块并附加至当前尾部。
最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在“很久”以前,百度图
片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便。
二、瀑布流的优缺点二、瀑布流的优缺点
优点:优点:
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){
weixin_38710781
- 粉丝: 3
- 资源: 907
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0