-
cssText=""+colsw*clos + "px" "查看全部
-
jQuery的：对象本质、支持连缀、隐式迭代 Jquery对象本质“可以看成”是一个包含一个 dom数组和所有Jquery方法的容器（补充：方法在所有jq对象共享的jq原型属性prototype中，Jquery对象本质是一个“类数组”）。所以一个dom节点元素或者js对象,如果不转换成Jquery对象,就不会包含Jquery方法,就无法使用jq的方法. 每当我们调用选择器方法获取dom树里的元素时，其实就是把找到的dom元素存入一个JQ对象里的dom数组中，然后再把这个JQ对象返回。 当我们调用Jquery方法时（如 html()），jq方法会遍历内部 dom数组，并调用每个dom元素的对应的dom属性或方法（如innerHTML），完成操作。 其中Jq方法遍历内部dom数组的过程就叫做【隐式迭代】。 【隐式迭代】 $(".A").addClass("B"); 像这样的就是隐式迭代 因为$(".A")选到的元素不一定只有一个 比如$(".A")选中10个元素 这10个元素都会加上"B"这个class 在jq中，所有的方法都被设计成自动操作对象集合，而不是单一的一个对象. 貌似除了ID选择器其它都是隐式迭代的(ID选择器只是将数组大小设置成为1而已,所以$("#A") 就算有多个id="A" 也只能得到第1个) ①scroll事件 $(window).on('scroll',function(){}); ②获取结果集中最后一个元素$('#main>div').last(); ③获取距离页面顶部的距离$lastBox.offset().top; js:offsetTop ④$(window).scrollTop();滚动条滚动的距离 ⑤$(window).height();浏览器可视窗口的高度 ⑥创建元素$('<div>'); ⑦插入元素append和appendTo查看全部
-
页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页 面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！) 一般样式控制的，比如图片大小控制放在onload 里面加载;查看全部
-
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实现瀑布流布局中图片排序 【原理】用一个数组存放每列的高度,当有新的图片加进来时,新图片总是加在列高最小的那一列,新图片加进来后,数组中相应的列的高度也相应增加. 【要点】 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 ="",以字符串的形式设置多个样式查看全部
-
JS实现的瀑布流效果和CSS3实现的瀑布流效果比较: 1、JS方式 1-1、需要计算，列数=浏览器窗口宽度/图片宽度，图片定位是根据每一列数据块的高度计算接下来的图片的位置 1-2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范 2、CSS方式 2-1、不需要计算，浏览器会自动计算列数，只需要设置列宽，性能高 2-2、列宽随着浏览器窗口大小进行改变，用户体验不好 2-3、图片顺序按照垂直顺序排列，打乱图片显示顺序 2-4、拖到滚动条加载图片还是依靠JavaScript或JQuery来实现查看全部
-
实现瀑布流的三种方法： js原生方法 jquery方法： css的多栏布局查看全部
-
瀑布流：等宽不等高查看全部
-
瀑布流的原理在于：利用绝对定位固定图片位置，图片等宽不等高。新东西：图片阴影（box-shadow）、圆角（border-radius）、用padding与margin的微妙区别。 设置边距使用padding而不是用margin，是因为offsetHight获取的高度包括padding 圆角：border-redius：5px；设置四个角为圆角，该值越大越趋向于圆形 阴影：box-shadow：水平 垂直 模糊程度 颜色；查看全部
-
-webkit-column-width 定义一列的宽度，浏览器根据屏幕可视宽度来计算列数 1,2,3竖着排查看全部
-
css js script查看全部
-
相对定位在父元素上查看全部
-
$.each([2,3,4],function(index,value){alert('第'+ index+ '数是'+value);}); $.each({a:3,b:'g'},function(index,value){alert('属性'+ index+ '的值是'+value);});查看全部
-
>为子元素，，“”为所有的后代元素 width为元素定义的width，而outerWidth为元素所占用的width，包含padding和margin值查看全部
举报
0/150
提交
取消