发表于: 2017-01-16 03:30:34
3 1142
今天完成的事情:
看了原生js关于引用类型、对象、数组、运算符、语句、函数
明天计划的事情:
看原生面向对象的程序设计、函数的表达式
收获:原生js写瀑布流
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{ padding: 0; margin: 0;
} #box{ width: 90%; margin: 20px auto;
} #box ul{ list-style: none; float: left; width: 24%; margin: 5px;
} #box ul img{ width: 100%; margin: 5px;
} </style></head><body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript">
var ulArr = document.querySelectorAll("ul"); function createImg (count) { for(var i = 0; i < count; i++) { //创建图片 和 li
var img = document.createElement("img");
img.src = "美女/" + i + ".jpg"; var li = document.createElement("li");
li.appendChild(img); //假设一个最短的ul
var minHeightUl = ulArr[0]; for (var j = 0; j < ulArr.length; j++) { if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
minHeightUl = ulArr[j];
}
}
minHeightUl.appendChild(li);
}
}
createImg(99); </script></body></html>
数组的常用方法如下:
- concat: 链接两个或者更多数据,并返回结果。
- every: 对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true。
- filter: 对数组中的每一项运行给定函数,返回改函数会返回true的项组成的数组。
- forEach: 对数组中的每一项运行给定函数,这个方法没有返回值。
- join: 将所有的数组元素链接成一个字符串。
- indexOf: 返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1。
- lastIndexOf: 返回在数组中搜索到的与给定参数相等的元素的索引里最大的值。
- map: 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
- reverse: 颠倒数组中元素的顺序,原先第一个元素现在变成最后一个,同样原先的最后一个元素变成现在的第一个。
- slice: 传入索引值,将数组中对应索引范围内的元素作为新元素返回。
- some: 对数组中的每一项运行给定函数,如果任一项返回true,则返回true。
- sort: 按照字母顺序对数组排序,支持传入指定排序方法的函数作为参数。
- toString: 将数组作为字符串返回。
- valueOf: 和toString相似,将数组作为字符串返回。
评论