给瀑布流加入模态对话框碰到的问题

在写原生JavaScript代码 听老师讲瀑布流结构后 感觉不难 自己做完  感觉要加点什么比较好

就在每个图片上加上一层mask hover改变css 并且点击出现模态对话框 效果出来了

今天把它放入我的小网页中 出现了错误(⊙o⊙)…

mask和image长度对不上 这个错误先也出现过  mask不论怎样就是比img的height长3px 所以我加上了一个函数getMask（）

function getMask(){    var mask=document.getElementsByClassName("mask");    var image=document.getElementsByTagName("img");    for(var i=0;i<mask.length;i++){        mask[i].style.height=image[i].offsetHeight+"px";        console.log(mask[i].offsetHeight);    }}

但是瀑布流显示在小网页上同样的问题又出现了(⊙o⊙)…

傻傻的想了很久。。。。。。。。。。。

总算想通了 image的index不在从0开始 网页中瀑布流上面还有其他图 o(╯□╰)o

所以改成了

function getMask(){    var mask=g('.mask');    var image=[];    for(var i=0;i<mask.length;i++){        image.push(mask[i].getElementsByTagName('img')[0]);    }    for(var i=0;i<mask.length;i++){        mask[i].style.height=image[i].offsetHeight+"px";        console.log([mask[i].offsetHeight,image[i].offsetHeight]);    }}

先循环选择每一个mask中的第一个img 在赋值..........