-
- 往事随风_遇见最好的你 2019-03-07
蓝色线条是蓝块距离页面顶端的距离加上滑块一半的高度，黑色线条是浏览器高度加上已经划过的距离。滚动时候，蓝色线条小于黑色时发生预加载。
-
截图0赞 · 0采集
-
- helen_papa 2018-05-05
最后一个盒子的top值+其高度<document高度+滚动条滚动的值
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-19
- 记住：Uncaught SyntaxError: Unexpected end of input 引用错误了，图片引用不对无显示
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-18
- 下半部： function waterfall(parent,box){ var oparent = document.getElementById(parent); //main所有的class叫box的取出来 var oboxs= getByClass(oparent,box); //console.log(obox.length); //计算整个页面显示列数（页面宽/box宽） var oboxw = oboxs[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oboxw); //设置main宽 var w = oparent.style.cssText = "width:"+oboxw *cols +"px;margin:0 auto"; //存放每列高度的数组 var harr = []; for(var i=0; i<oboxs.length; i++){ if(i<cols){ //一组高度 harr.push(oboxs[i].offsetHeight); }else{ ////min方法只能第一组方法，不能对很多数组，所以用apply改变this指向 var hmin = Math.min.apply(null,harr); var index = getIndex(harr,hmin); oboxs[i].style.position = "absolute"; oboxs[i].style.top = hmin+"px"; //oboxs[i].style.left = oboxw*index +"px"; oboxs[i].style.left = oboxs[index].offsetLeft +"px"; //修改原来最小值：给它再赋值（把它原来的高+后面下面那个盒子的高）146+后面图片高 harr[index] += oboxs[i].offsetHeight; } } //console.log(harr); }
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-18
- for循环外调用 waterfall 函数 //滚动条判断检测是否具备滚动条加载数据库的条件 function checkScrollSlide(){ var oparent = document.getElementById("main"); var oboxs = getByClass(oparent,"box"); //最后一个盒子自身一半到顶点的高度 var lasth = oboxs[oboxs.length-1].offsetTop+Math.floor(oboxs[oboxs.length-1].offsetHeight/2); var scrolltop = document.body.scrollTop||document.documentElement.scrollTop; console.log(scrolltop); //浏览器窗口的高度 var height = document.body.clientHeight||document.documentElement.clientHeight; //最后一块小于滚动条加浏览器的高度时返回true加载 return (lasth < scrolltop + height)?true:false; }
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-18
- js 上：//获取classname为cls的数组 function getByClass(parent,cls){ var boxArr = new Array(), //存储class为box的元素 oelements = parent.getElementsByTagName("*"); for(var i=0; i<oelements.length; i++){ if(oelements[i].className == cls){ boxArr.push(oelements[i]); } } return boxArr; } //获取最小值的索引,如果arr数组中的某一个等于我们传的数字val,返回他索引 function getIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } //滚动条判断检测是否具备滚动条加载数据库的条件
-
截图0赞 · 0采集
-
- 慕仙5237505 2017-11-18
- 蓝线（最后一张图片的offsetTop + 自身盒子的高度一半）小于黑线时才开始加载scroll最后一张图片
-
截图0赞 · 0采集
-
- qz不忘初心 2017-09-06
- 混杂模式下获取scrollTop:document.body.scrollTop; 标准模式下获取scrollTop:document.documenElement.scrollTop
- 0赞 · 0采集
-
- 叶小燕哦 2017-08-19
- 老师写错了if里面的条件吧 函数名后面少加了个括号。
- 0赞 · 0采集
-
- 微风灬唐唐 2017-08-15
- Math.floor()可以进行取整
- 0赞 · 0采集
-
- 白小九 2017-07-29
- 1、数据块的信息应从后台用JSON传过来 2、动态创建的div.box、div.pic等未自动进行left和top计算，需要再次调用waterfall函数
-
截图0赞 · 0采集
-
- 白小九 2017-07-29
- 检查是否具备了加载数据块的条件：判断最后一个数据块是否已到达视窗（露出的面积自定义）
-
截图0赞 · 0采集
-
- 呆呆呆 2017-06-27
- 黑线大于蓝线时加载数据块
-
截图0赞 · 0采集
-
- Wendy_22 2017-04-16
- 实现瀑布流的加载
-
截图0赞 · 0采集
-
- qq_風雪夜歸人_0 2017-03-16
- onscroll 事件
- 0赞 · 0采集
-
- wshyzx 2017-03-13
- 滚动条移动的高度与文档向上滚动的高度应该不是一样的，应该是（内容盒子高度 - 文档高度） / (文档高度 - 滚动条的高度) * 滚动条移动的数值 不需要三元操作符 return lastBoxH<scrollTop+height 就可以了 这样不仅简洁解析也更快
- 0赞 · 2采集
-
- qq_痞子蔡_0 2017-03-10
- 数据块渲染
-
截图0赞 · 0采集
-
- qq_痞子蔡_0 2017-03-10
- 数据块渲染
- 0赞 · 0采集
-
- qq_痞子蔡_0 2017-03-10
- 12334556
-
截图0赞 · 0采集
-
- qq_痞子蔡_0 2017-03-10
- 检测滚动条加载数据库条件
-
截图0赞 · 0采集
-
- 慕粉18221508921 2017-02-21
- 滚动条移动的高度与文档向上滚动的高度应该不是一样的，滚动条滚动1px = 文档滚动（内容盒子高度 - clinetHeight） / (clinetHeight - 滚动条的高度); 所以当内容高度>=clientHeight两倍时，滚动条移动1px <>内容滚动的高度，因为滚动条可以滚动的高度<clientHeight,而内容未展示的高度>=clintHeight
- 0赞 · 0采集
-
- qq_我叫红领巾_2 2017-02-16
- 滚动条拖动 加载图片
- 0赞 · 0采集
-
- redli_0 2017-02-13
- 最后模块距离顶部的距离是一个定值，滚动条下拉过程中滚动条滚动距离加浏览器高度的和的值一直在变大，当变大的到临界值时与最后模块距离顶部距离时，开始触发加载最先的图片
- 0赞 · 0采集
-
- redli_0 2017-02-13
- 当最后模块距离顶部的距离到达一个临界值（滚动条滚动距离+可视窗口大小）的时候开始轮播前面的图片。
- 0赞 · 0采集
-
- 梦想还是要有的万一实现了呢 2017-01-29
- 约定 蓝线的距离小于黑线的时候 开始加载 黑线的距离是向上偏移的距离加上浏览器本身的高度 蓝线的距离是盒子顶部到最后一个盒子的高度的一半的距离
-
截图0赞 · 1采集
-
- DCraig 2017-01-13
- onscroll事件实现瀑布流布局的图片加载功能 【原理】 当滚动滚动条时，判断是否要加载新的图片，通过一个函数，返回布尔值。 需要加载的条件： 页面最下面的元素box在视口中露出一半的高度时，开始加载。具体计算：(scrollTop+可视宽口高度)>(box.offsetTop+自身高度一半)时，加载（如图所示）。 【知识点】 ①scrollTop标准模式和混杂模式的兼容问题。 标准模式--document.body.scrollTop 混杂模式--document.documentElement.scrollTop; 兼容的写法：var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; ②当前浏览器的可视窗口的高度 标准模式--document.body.clientHeight 混杂模式--document.documentElement.clientHeight; ③三元运算符代替if..else(比较简便) ④数据加载：将来自后台的json数据渲染到前端 创建元素,将数据填进去（这里是img的src） ⑤document.createElement创建元素 parentObj.appendChild(obj);插入对象到尾部
- 1赞 · 3采集
-
- RunningLuo 2016-12-19
- 混杂模式下获取scrollTop:document.body.scrollTop; 标准模式下获取scrollTop:document.documenElement.scrollTop 一般浏览器都支持标准模式下
- 0赞 · 0采集
-
- qq_八雲丶輝夜_0 2016-12-07
- .....
-
截图0赞 · 0采集
-
- qq_君莫笑_27 2016-11-20
- 拖动滚动条加载图片
- 0赞 · 0采集
-
- 空之境界丶 2016-11-14
- onscroll事件实现瀑布流布局的图片加载功能 【原理】 当滚动滚动条时，判断是否要加载新的图片，通过一个函数，返回布尔值。 需要加载的条件： 页面最下面的元素box在视口中露出一半的高度时，开始加载。具体计算：(scrollTop+可视宽口高度)>(box.offsetTop+自身高度一半)时，加载（如图所示）。 【知识点】 ①scrollTop标准模式和混杂模式的兼容问题。 标准模式--document.body.scrollTop 混杂模式--document.documentElement.scrollTop; 兼容的写法：var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; ②当前浏览器的可视窗口的高度 标准模式--document.body.clientHeight 混杂模式--document.documentElement.clientHeight; ③三元运算符代替if..else(比较简便) ④数据加载：将来自后台的json数据渲染到前端 创建元素,将数据填进去（这里是img的src） ⑤document.createElement创建元素 parentObj.appendChild(obj);插入对象到尾部
- 0赞 · 0采集
数据加载中...