-
onscroll事件实现瀑布流布局的图片加载功能 【原理】 当滚动滚动条时,判断是否要加载新的图片,通过一个函数,返回布尔值。 需要加载的条件: 页面最下面的元素box在视口中露出一半的高度时,开始加载。具体计算:(scrollTop+可视宽口高度)>(box.offsetTop+自身高度一半)时,加载(如图所示)。 【知识点】 ①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);插入对象到尾部查看全部
-
瀑布流布局----2-5 JavaScript实现瀑布流布局中图片排序 【原理】第二行的第一个box排在第一行高度最矮的那个下面,第二个排在次矮的那个下面,以此类推。 需要一个数组,存放每行每个box的offsetHeight的数组 【要点】 1.求数组中最小值 Math.min()只能求一组数据的最小值,通过传参,而不是数组。 借助apply()方法,apply用来改变函数中this的指向,这里用来改变Math对象中的this指向 Math.min.apply(null,hArr); 2.求最小值在数组中的索引 封装函数getIndex 3.图片定位(两种方法) position:absolute; 4.存放offsetHeight的数组值hArr要不断更改 在每次定位之后,最小高度的box加上定位在其下的box的offsetHeight ;即:hArr[index]+=oBox[i].offsetHeight;查看全部
-
appendChild()查看全部
-
标准模式 混合模式查看全部
-
Math.min.apply(null,hArr);//取数组中的最小值,其中hArr是数组的名称查看全部
-
瀑布流布局 等宽不等高查看全部
-
jq实现方式查看全部
-
Javascript 实现瀑布流布局, 父级的应为relative 每个数据块上的 position 属性应定义为(absolute)查看全部
-
CSS3方式查看全部
-
CSS方式查看全部
-
求最小值:Math.min.apply(null,array)查看全部
-
waterfall()函数查看全部
-
Math.min.apply(null,数组)查看全部
-
$boxs.eq(0).width 仅为定义的宽度;$boxs.eq(0).outerwidth为宽度+padding+border查看全部
-
实现方法查看全部
举报
0/150
提交
取消