<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 1:属性和变量 函数和方法 变量是咋内存里放了一个空间.对象有属性. var a=1;//window是最大的对象; 属性饿变量一个东西两个说法. 变量辅佐在对象身上就是属性.但一直都辅助; 被对象调用被称为属性,否则称为变量; 被对象调用被称为方法,否则称为函数; <script> //工厂模式; function ceeatePerson(oname,oage) {//构造函数 // var person={ // name:oname, // age:oage, // person.jineng=function () { // alert(this.name) // }; var person={}; name=oname; age=oage; person.jineng=function () { alert(this.name) }; return person; } var li=ceeatePerson("liming","20") //Li 为构造函数的实例;或称为构造函数的类(js没有类) var sun=ceeatePerson("sunhong","20") //原型链.原型下的.多个对象原型互相调用形成的链式结构. 只有函数有prototype(或者构造函数.以及) 对象只有proto; constructor.是proto下面的属性.指向构造函数. proto.形成 圆形方法 行内; 外部; 继承: function parent(onaem) { if(!oname){ oname="rua"; } this.name=oname; } paent.peototype.jineng=function () {//原型; alert("asdfasd") } var pen=new paernt() open.parent(); console.log(open.name); function son() { } son.prototype=new parent();//子元素的原型指向父元素的实例; var oson=new son(); oson.jineng=function () { alert("wohuiyangyuang")//多肽; } oson.jineng(); 函数的嵌套>定时器.call和apply(传的数组)会改变this 的指向; apply.call只能那父元素的定义好的的属性;原型上的那不过来. function add(a,b) { alert(a+b) } function jian(a,b) { var rua=add.call(this.a,b) var rua=add.apply(this,[a,b]) } add.call(jian,1,2) (function () { function obj() {}; obj.prototy=add.prototype;; jian.prototype=new obj(); })() //匿名函数;面向对象时, </script> </body>
</html>
// 瀑布流
var oheight=document.documentElement.clientHeight||document.body.clientHeight; function getshort(div) { var i=0; var divhgt=div[i].offsetHeight; for(j=0;j<div.length;j++){ if(div[j].offsetHeight<divhgt){ i=j; divhgt=div[i].offsetHeight; } } return i; // for(i=0;i<div.length;i++){ // div[i].index=i; // for(j=0;j<div.length;j++){ // if(div[i].offsetHeight<div[j].offsetHeight){ // return i; // } // } // } } //在不滚动滚动条的情况下。页面的自动满屏。 ajax("post","getPics.php","cpage=1",function (abs) { var json=JSON.parse(abs); for(x in json){ var img=document.createElement("img"); var div=document.createElement("div"); img.src=json[x].image; img.style.width=200+"px"; div.appendChild(img); var case1=document.getElementsByClassName("case"); var long=getshort(case1);//返回长度最小的cased的索引; var leng=case1[long].offsetHeight; var oht=document.documentElement.scrollTop; if(leng<(oheight+oht)){ m=x; console.log(m); case1[long].appendChild(div); } } }) //在滚动滚动条的情况下。页面的自动满屏。 window.onscroll=function () { ajax("post","getPics.php","cpage=1",function (abs) { var json=JSON.parse(abs); for(x in json) { var img=document.createElement("img"); var div=document.createElement("div"); if(m>=50){//下面的m++;所以,吗>=50; m=0; } img.src = json[m].image; // console.log(json[x].image); img.style.width=200+"px"; div.appendChild(img); var case2=document.getElementsByClassName("case"); var long=getshort(case2);//返回长度最小的cased的索引; var leng1=case2[long].offsetHeight; var oht=document.documentElement.scrollTop; // console.log(m); if(leng1<(oheight+oht)){ m++; console.log(m); case2[long].appendChild(div) } } }) }//