js学习（新浪微博实习3）

这周开始接收一些真正的业务了。都是些简单的业务逻辑。

1 返回顶部的按钮，这个实现上没什么难度，主要就是要判断滚动scrollTop的高度开始显示返回顶部的按钮，然后点击按钮触发scrollTop=0的事件，要注意的就是控制返回顶部按钮一直跟随的话，chrome可以用fixed绝对定位，而ie6只能用每一次scroll事件来计算距离顶部的高度，用scrollTop+之前的定位高度。

2 点击某个div让另外一个div消失。这个很简单，没什么好说的。

3 瀑布流懒加载，想让不同长短的图片加载出来后保证不出现太大的差别，用每一次加载都判断的方法，就是用ajax请求出一张照片，在几栏瀑布中找出最短的瀑布，然后放在他上面，每加载完一张，就判断一次，这样可以保证每次都是从最短的加载，保证不会出现太大的图片高度差距。这里遇到过一个bug就是，注意加载下一张的时候一定要注意保证上一张加载完成了，以后处理图片事件的时候也是，特别是这次需要计算高度，一定要图片加载完了再计算，所以，我把判断事件写在了图片的onload事件里面，每加载一张，判断出最短的，补上照片，再将onload绑在新加载的照片上，如此循环。

4 关于照片墙：实现原理，两个数组，一个数组放置当前所有页面上显示的图片源地址，另外一个数组放置备用图片，每次从第一个数组中随机选择3个地址，取出并放置在数组2的尾部，数组2的前3张去补充换下来的地方，至于动画效果，两种，第一种是从页面上选出来的图片位置撤下（随机方向撤走），撤完销毁那个节点，在那个位置插入新的图片节点，地址规则如上所示。第二种是随机方向传进一张图片，并把被掩盖的图片销毁。

这里面注意，在文档流中，后面的的优先显示，也就是说，想要飞进效果的时候，需要插入一个新img节点在要替换节点后面，其动画效果会慢慢遮盖前面的节点，而撤出的时候，需要把撤出节点放在插入节点前面，这样撤出的效果才会掩盖后面的节点。

几个发现的问题：1 在嵌套<div id=1><div id=2><img id=3/></div></div>这种结构中，1.firstNode和1.lastNode会是一个文档节点，这是自动加入的，在chrome下测试过，虽然2.firstNode不会出现这种问题，就是2.firstNode能取到img，但是使用STK（insertHTML，‘afterend’）之后，往往有可能会带入一个空的文档节点。总之，以后用firest和last取节点的时候一定要记得判断，可以用如下函数：

elementChild: function(dom,str){

var result;

switch(str){

case 'firstChild':

if (dom.firstElementChild) {result = dom.firstElementChild;}

else{result=dom.firstChild;while(result&&(result.nodeType!=1)){result=result.nextSibling;}}

break;

case 'lastChild' :

if (dom.lastElementChild) {result = dom.lastElementChild;}

else{result=dom.lastChild;while(result&&(result.nodeType!=1)){result=result.previousSibling;}}

break;

}

return result;

。

5  在ie中被虐的经历：开始时显示就出了问题，尝试之后发现，ie8只能显示32位深的png格式，不能显示24位的png格式，好 ，我把所有图片改成jpg格式之后，ie8只能显示24位的jpg，32的又不能显示了，能死么！！！傻逼ie。以后要注意了。

6  还是ie，其实赖我自己不注意，构图的时候给img节点都加了关闭标签 如

<img></img>刚开始在chrome调试的完全没问题，后来发现在ie上各种蛋疼，我勒个去，后面发现，ie给这种情况自动把</img>解析成了一个节点！所以我在节点列表中找到<img>的下一个节点是</img>这尼玛是什么，以后宁愿不加闭合也不能瞎加闭合啊~~~~，我估计<img>,<input>,<meta>都如此，以后记住了。

7 给链接等添加click事件的时候，一定要先把默认事件去除了！！！！！！！