为了账号安全,请及时绑定邮箱和手机立即绑定
  • 求minH在数组hArr中的索引:$.inArray(minH,hArr); 求数组最小值var minH=Math.min.apply(null,hArr);
    查看全部
  • alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin alert($(window).width()); //浏览器时下窗口可视区域宽度 alert($(document).width());//浏览器时下窗口文档对于象宽度 alert($(document.body).width());//浏览器时下窗口文档body的高度 alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度 alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度
    查看全部
  • 在jQuery中, width()方法用于获得元素宽度; innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。 同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。 所以说:对于同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);
    查看全部
  • 元素下的第一个子元素
    查看全部
  • 元素下的第一个子元素
    查看全部
  • //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素 function getByClass(clsName, parent){ var oparent=parent?document.getElementById(parent):document; var objs=oparent.getElementsByTagName("*"); var result=[]; for(var i=0;i<objs.length;i++){ var clas=objs[i].className.split(" "); for(var j=0;j<clas.length;j++){ if(clsName==clas[j]){ result.push(objs[i]); } } } console.log(result); return result; }
    查看全部
    1 采集 收起 来源:编程练习

    2018-03-22

  • function checkslide(){ var oparent=document.getElementById('main'); var obox=getByClass(oparent,'box'); var h=obox[obox.length-1].offsetTop; var top=document.documentElement.scrollTop||document.body.scrollTop; var wh=document.documentElement.clientHeight||document.body.clientHeight; console.log("h"+h+"top"+top+wh); return (h<top+wh)?true:false; }
    查看全部
  • 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);插入对象到尾部
    查看全部
  • 重新封装getElementsByClassName和indexOf为了照顾低版本IE.
    查看全部
  • @瀑布流布局----2-5 JavaScript实现瀑布流布局中图片排序 【原理】用一个数组存放每列的高度,当有新的图片加进来时,新图片总是加在列高最小的那一列,新图片加进来后,数组中相应的列的高度也相应增加. 【要点】 1.求数组中最小值 Math.min()只能求一组数据的最小值,通过传参数列表,而不是数组。 借助apply()方法,1.将数组变为参数列表,2.改变函数中this的指向(本节课用不到此功能) Math.min.apply(null,hArr); 2.求最小值在数组中的索引 封装函数getIndex 3.图片定位(两种方法) position:absolute; top:minH+’px’; 1).left:oBoxW.index+’px’; 2).left:oBoxs[index].offsetLeft+’px’; 4.存放offsetHeight的数组值hArr要不断更改 在每次加入新图片后,最小高度的box加上定位在其下的box的offsetHeight ;即:hArr[index]+=oBoxs[i].offsetHeight;
    查看全部
  • **offsetWidth属性包括padding在内的宽度,而不是元素的width值** offsetWidth = 内容宽度 + 内边距宽度×2 +边框宽度×2 【不包括外边距margin】 要点: 1.封装瀑布流的函数waterfall 2.封装通过className获取元素集的函数 (原因:因为ie8以下不兼容classname,所以要封装一个函数来获取,如果存在多个className的情况,那么if(oElements[i].className.split(" ").indexOf(className)!==-1){……} 进行判断就OK了。如图) 3.计算一行显示的列数,父级宽度/box的offsetWidth,注意取整Math.floor; var cols = Math.floor(document.documentElement.clientWidth / oBoxWidth); (获取页面可见宽度可能会出现兼容问题,可用var h = window.innerHeight || document.documentElement.clientWidth || document.body.clientWidth; //Width,Height同理) 4.obj.style.cssText ="",以字符串的形式设置多个样式
    查看全部
  • 监视浏览器窗口大小改变可以用window.onresize
    查看全部
  • var txtarr = all[i].className.split(" "); // 将数组的class分开,适用于多个类名的时候 for(var j=0; j<txtarr.length; j++){ if(txtarr[j] == classname){ arr.push(all[i]); }
    查看全部
  • Math.round() 功能:四舍五入取整。 Math.floor() 功能:对一个数进行下取整。 Math.ceil() 功能:对一个数进行上取整。
    查看全部
  • Javascript 实现瀑布流布局, 父级的应为relative 每个数据块上的 position 属性应定义为(absolute)
    查看全部
    0 采集 收起 来源:练习题

    2016-10-18

举报

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

微信扫码,参与3人拼团

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

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