为了账号安全,请及时绑定邮箱和手机立即绑定
  • 1、JS求一组数据中的最小值: Math.min(1,2,4,6); 2、JS求数组中的最小值: Math.min.apply(null,myArr);
    查看全部
  • 实现瀑布流布局的三种方法: JavaScript JQuery CSS3多栏布局
    查看全部
  • offsetheight 和offsetwidth 无法获取元素margin的值
    查看全部
  • ①column的浏览器兼容问题,不同内核要写其前缀 -webkit -ms -o -moz ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距,不一定定义多少,实际就显示多少。其计算规则:用当前浏览器宽口宽除以定义的列宽,剩下的距离平均分配
    查看全部
  • jQuery的:对象本质、支持连缀、隐式迭代 Jquery对象本质“可以看成”是一个包含一个 dom数组和所有Jquery方法的容器(补充:方法在所有jq对象共享的jq原型属性prototype中,jq对象本质是一个“类数组”)。 要使用Jquery,就必须将dom元素转成 Jquery对象,然后才能调用JQ对象的 便捷方法。 每当我们调用选择器方法查找dom树里的元素时,其实就是把找到的dom元素存入一个JQ对象里的dom数组中,然后再把这个JQ对象返回。 当我们调用Jquery方法时(如 html()),jq方法会遍历内部 dom数组,并调用每个dom元素的对应的dom属性或方法(如innerHTML),完成操作。 其中Jq方法遍历内部dom数组的过程就叫做【隐式迭代】。 ①scroll事件 $(window).on('scroll',function(){}); ②获取结果集中最后一个元素$('#main>div').last(); ③获取距离页面顶部的距离$lastBox.offset().top; js:offsetTop ④$(window).scrollTop();滚动条滚动的距离 ⑤$(window).height();浏览器可视窗口的高度 ⑥创建元素$('<div>'); ⑦插入元素append和appendTo
    查看全部
  • checkScollslide()函数
    查看全部
  • 1、jQuery是继prototype之后又一个优秀的Javascript框架 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对象
    查看全部
  • Math.min只能找出一组数据中的最小,无法找到一个数组中的最小,要想让这个方法找到数组里的最小数,可用使用apply来改变指向.例如 Math.min.apply(null,array);第一个值可以给null,第二个值给要查找最小数的数据
    查看全部
  • @瀑布流布局---2-6 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);插入
    查看全部
  • javascript实现瀑布流布局中图片排序代码 图片排序:(第二行的第一张图片排列在第一行中高度最矮的那张图片下面) 【原理】第二行的第一个box排在第一行高度最矮的那个下面,第二个排在次矮的那个下面,以此类推。 【要点】 判断输出个数:console.log(hArr); 1、建立存高array :var hArry=[]; 把i<cols中图片高度压入数组中:hArry.push(oBox[i].offsetHeight); 2.第七张图片加载在前六张中高度最矮的位置下 计算数组中的最小值:var minH=Math.min.apply(null,hArry); 求数组中最小值 Math.min()只能求一组数据的最小值,通过传参,而不是数组。 借助apply()方法,apply用来改变函数中this的指向,这里用来改变Math对象中的this指向 Math.min.apply(null,hArr); 3.定义left 知道高度最小值的索引index function getMinIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } a、oBox[i].style.left=oBox[index].offsetLeft+'px'; b、oBox[i].style.left=oBoxw*index+'px'; 4、定义第七张图片的top、left oBox[i].style.postion='absolute'; oBox[i].style.top=minH+'px'; oBox[i].style.left=oBoxw*index+'px'; oBox[i].style.left=oBox[index].offsetLeft+'px'; 5、解决盒子重叠(因为数组未更新,全部以原先数组来比较) hArry[index]+=oBox[i].offsetHeight;
    查看全部
  • 2-3 JavaScript实现瀑布流布局中图片定位 **offsetWidth属性包括padding在内的宽度,而不是元素的width值** 要点: 1.封装瀑布流的函数waterfall 2.封装通过className获取元素集的函数 3.计算一行显示的列数,父级宽度/box的offsetWidth,注意取整Math.floor; var cols = Math.floor(document.documentElement.clientWidth / oBoxWidth); 4.obj.style.cssText ="",以字符串的形式设置多个样式
    查看全部
  • 瀑布流 原理: 数据加载的时候通过绝对定位来找到box的位置,而box的位置又是相对于main来定义的,所以main要用position:relative;来定义 特点: 等宽不等高 HTML中的类: #main、.box、.pic 外层套一个div为.box来设置padding作为pic之间的间隔,不推荐margin。因为获取数据块高度offset().height能够获取padding间距离,而不会获取margin的间距。 box与box之间用padding来去间隔位置,而不用margin
    查看全部
  • 【知识点】 ①column的浏览器兼容问题,不同内核要写其前缀 -webkit -ms -o -moz ②column-width 和column-count没有必要同时出现 ③column-rule设置列与列之间的边框 ④column-gap 设置列间距,不一定定义多少,实际就显示多少。其计算规则:用当前浏览器宽口宽除以定义的列宽,剩下的距离平均分配
    查看全部
  • jQuery的:对象本质、支持连缀、隐式迭代 Jquery对象本质“可以看成”是一个包含一个 dom数组和所有Jquery方法的容器(补充:方法在所有jq对象共享的jq原型属性prototype中,jq对象本质是一个“类数组”)。 要使用Jquery,就必须将dom元素转成 Jquery对象,然后才能调用JQ对象的 便捷方法。 每当我们调用选择器方法查找dom树里的元素时,其实就是把找到的dom元素存入一个JQ对象里的dom数组中,然后再把这个JQ对象返回。 当我们调用Jquery方法时(如 html()),jq方法会遍历内部 dom数组,并调用每个dom元素的对应的dom属性或方法(如innerHTML),完成操作。 其中Jq方法遍历内部dom数组的过程就叫做【隐式迭代】。 ①scroll事件 $(window).on('scroll',function(){}); ②获取结果集中最后一个元素$('#main>div').last(); ③获取距离页面顶部的距离$lastBox.offset().top; js:offsetTop ④$(window).scrollTop();滚动条滚动的距离 ⑤$(window).height();浏览器可视窗口的高度 ⑥创建元素$('<div>'); ⑦插入元素append和appendTo
    查看全部
  • 1、jQuery是继prototype之后又一个优秀的Javascript框架 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对象
    查看全部

举报

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

微信扫码,参与3人拼团

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

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