JavaScript-豆瓣东西图片的遮层效果？

Question

想做一类似于图片墙的效果，有一个效果不知道怎么实现了，很多网站都有这个效果，这里就拿豆瓣东西的举例子吧。

• 鼠标一上去有个遮层，分享...
• 图片是动态生成的，不知道数量，和高度

谢谢

Answer 1

先说遮层，原理就是在鼠标移动到父元素时，把原来隐藏的子元素显示出来：

html:

<div class="item">
<div class="pic">
<!-- 默认显示的放这 -->
</div>

<div class="overlay">
<!-- 遮层 -->
</div>
</div>

css:

.item {
position: relative;
}

.item .overlay {
display: none;
position: absolute;
left: 0px;
top: 0px;
}

.item:hover .overlay {
display: block;
}

上面是最基本的，往两个div里加点东西，或者设置长宽就能看到效果。在这基础上，不用display，而是默认把height, width设成0，加上transition就能做出遮层移动出来的效果。

然后是动态加载图片，豆瓣东西的图片高度都是一样的，所以很好办，直接在尾部插进新元素就可以了。对于高度不定的图片，可以直接插，也可以计算高度，把元素插在合适的列。