为了账号安全,请及时绑定邮箱和手机立即绑定
  • Math.min.apply(null,hArr),求数组中最小值
    查看全部
  • 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);插入对象到尾部
    查看全部
  • 2、$(window).width() 浏览器视窗的宽度 outerWidth() = padding+border+width; width() = width 3、$.inArray(所找元素,数组) 该方法用于获取元素的索引 4.jQuery遍历的函数each $boxs.each(function(index,value){ }); index 索引值,value对应的值 5.eq(n),从结果集中选取第n的元素 6.$.inArray(value,arr)工具函数,用来判断某个值在数组中的索引 7.each遍历的value是DOM对象。将value DOM对象转换为jQuery对象才能使用其方法 :$(value) jQuery的$.inArray()方法直接可以得到一个数在数组中的索引 $(dom) 将Dom对象转换成jQuery对象 each遍历的value是DOM对象。将value DOM对象转换为jQuery对象才能使用其方法 :$(value)
    查看全部
  • 瀑布流布局--4-1 CSS3实现瀑布流布局 【原理】css3多栏布局column 【知识点】 ①column的浏览器兼容问题,不同内核要写其前缀 ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距,不一定定义多少,实际就显示多少。其计算规则:用当前浏览器宽口宽除以定义的列宽,剩下的距离平均分配
    查看全部
  • 此例为例 加载的临界条件:页面显示的最后一张图片显示50%的后拖动滚动条开始加载 判断:滚动条拖动的高度+浏览器高度>=该图片的offsetTop+图片高度的一半
    查看全部
  • 获取数组中的最小值:Math.min.apply(null,ArrayName);
    查看全部
  • parent.getElementByTagName("*");获取当前元素下所有子元素
    查看全部
  • 父盒子相对定位,所有的子盒子绝对定位
    查看全部
  • 用padding而不用换margin的原因:js获取数据块的高度时( offsetHeight) 包括图片所在的盒子高度和数据块间的距离 offsetHeight包含padding的值而不能将margin的值计入在内
    查看全部
  • 瀑布流布局特点:数据块等宽不等高,随着下拉条的滚动,慢慢加载如蘑菇街
    查看全部
  • 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;
    查看全部
  • 瀑布流布局 等宽不等高
    查看全部
  • jq实现方式
    查看全部
  • Javascript 实现瀑布流布局, 父级的应为relative 每个数据块上的 position 属性应定义为(absolute)
    查看全部
    0 采集 收起 来源:练习题

    2016-01-08

举报

0/150
提交
取消
课程须知
1.你一定对HTML+CSS比较熟悉; 2.掌握一定的JS基础知识,尤其是函数封装、调用等知识; 3.对jQuery相关知识掌握。
老师告诉你能学到什么?
1.学会实现瀑布流布局实现的三种方式; 2.div如何定位和排序; 3.掌握CSS3中多栏布局的知识。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!