变量的提升+js动画+瀑布流+json

1.变量的提升

在函数中出现 变量声明的时候 会将变量放到 当前函数 开始的位置

2. js动画

(1) getComputedStyle 获取元素的样式
不受限制 不管是不是行间样式 都能获取到

console.log('getComputedStyle' + getComputedStyle(box)['left']);

仅在IE中使用

console.log("currentStyle" + box.currentStyle['left']);

(2) offsetWidth; 算边框
获取 元素的 宽度
元素在水平方向上占用的空间的大小
元素宽度+padding-left+padding-right+border-left+border-right

 console.log("小球offsetWidth" + box.offsetWidth);

(3) offsetHeight 获取 元素 高度
元素在垂直方向上占用的空间的大小
元素高度+padding-top+padding-bottom+border-top+border-bottom

  console.log("小球offsetHeight" + box.offsetHeight);

(4) offsetLeft 元素左外边框至父级元素的左内边框之间的像素距离

  console.log("小球offsetHeight" + box.offsetLeft);

(5) offsetTop:元素左上内框至父级元素的上外边框之间的像素距离

console.log("小球offsetHeight" + box.offsetTop);

(6) clientWidth 不算边框 里面的内容区域
content + padding
元素的 边框内的区域
元素内容区宽度加上左右内边距的宽度 不算边框 里面的内容区域

 console.log("client" + fbox.clientWidth);
 console.log("offset" + fbox.clientWidth);
 console.log("client" + fbox.clientHeight);
 console.log("offset" + fbox.clientHeight);

(7) clientHeight:元素内容区高度加上上下内边距的宽度

(8) style.left:通过.style.left获取css样式获取的是行间样式

(9) getAttribute 获取 自定义下标

(10)setAttribute 设置 自定义下标

3.瀑布流

1.根据浏览器宽度 以及 每一列的固定宽度 计算 需要多少列
2.循环生成每一个元素 将他添加到 父级元素中
3.第一行添加完之后 用 数组 将每一列的高度 储存起来
4.从第二行开始 每次添加 新的元素时 判断 那一列高度来最小 将新的元素添加到最小高度那一列
5.当滚动条接近于底部时时候 加载新的数据

4.json 字符串

里面的值 是通过 键值对 的形式储存
key value
key 一般情况下 都使用 字符串 的形式;

 var people = {
 name: '胖胖',
 'age': 38,
 'sex': 1,
 'wife': {
 'first': '大胖',
 'second': '二胖',
 'thired': '隔壁老王'
 },
 'chirld': ['刘耀文', '蔡徐坤', '易烊千玺']
 }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容