瀑布流颜色随机加载滚动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
#box{width:700px;margin:0 auto;}
#box ul{width:198px; float:left; border:1px solid #000;margin-right:50px;}
#box ul li{ list-style:none; font-size:100px; color:#fff;}
</style>
<script>
function test()
{
var oBox=document.getElementById('box');
var aUl=oBox.children;
var n=0;
//每次20个
for(var i=0;i<20;i++)
{

}

window.οnlοad=function ()
{ test();
}

//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}

//文档的总高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}

//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() >= getScrollHeight()-300){
//　alert("you are in the bottom!");
test()
　　}
};

</script>
</head>

<body>

</body>
</html>

转载于:https://www.cnblogs.com/moliwanzi/p/3939852.html

瀑布流颜色随机加载滚动相关推荐

分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
2023年高频前端面试项目考点（npm，git，webpack，TS4，sass，瀑布流，懒加载）
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客 *表示回顾基础知识项目为二面三面,面试官基本就是照着简历 ...
ajax瀑布流 dede,dedecms加载更多,无限下拉瀑布流插件
这篇教程会使用到Infinite Ajax Scroll插件,即无限的ajax滚动,当页面滚动到容器可见部分将自动异步加载数据. 插件的集成很简单,分以下几个步骤: 1.页面中引用jquery.js ...
超便捷好用的-圆形花瓣加载滚动图片插件spin.js
使用ajax异步请求时显示过渡的加载滚动图片是在常用不过的事情,接下来和大家分享这个插件. 样子示例:(只有这一个样子,可以动态设置显示大小.花半数.颜色等各项参数) 注:如果需要更绚丽样式的童鞋,请 ...
JS代码实例：实现随机加载不同的CSS样式
如果让网页浏览者每次打开页面都有新的感觉,可以通过替换css样式来处理.下面来介绍一下. 随机载入CSS样式的JS效果实际上很好实现,本文的代码如下,具体思路是用一个默认的CSS样式:default. ...
layui信息加载流的方式加载数据
SSM项目中使用layui信息加载流的方式加载数据这里首先jsp页面来一个div容器,这里数数据显示的地方 //css样式: <style type="text/css"& ...
微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
腾讯动漫爬虫与动态随机加载反爬破解技术实战
本文作者韦玮原创,转载请注明出处. 项目需求与问题引入有时,我们想爬取腾讯动漫中的漫画,比如,我们不妨打开腾讯动漫中某一个动漫的网址ac.qq.com/Comic/comic-,如下图所示: 然后, ...

瀑布流颜色随机加载滚动

瀑布流颜色随机加载滚动相关推荐

最新文章

热门文章

瀑布流 颜色随机 加载滚动

瀑布流 颜色随机 加载滚动相关推荐

最新文章

热门文章

瀑布流颜色随机加载滚动

瀑布流颜色随机加载滚动相关推荐