场景

我们经常会遇到这种场景，有一个待选图片列表，在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标，这篇文章就记录实现这个功能的过程。

原理

利用flex布局space-around显示图片列表

在图片的外层加一个div，同时把勾选状态图标加进去

现在的问题就是如何把勾选状态图标移到图片上(这部分可对照最后的代码看)

给图标添加一个margin-right，把图标挤过去，这要求pic-block的宽度固定，如果要到达响应式页面的效果，这个方法是肯定不行的。

将图标设置为position：relative相对定位，然后再添加right:10%让图标往左移动，这样虽然能达到一定的适应性，而且pic-block的宽度不需要固定，但是图标并未脱离文档流，所以在页面中还是会占用空间，而当有的图片有勾选图标时，有的没有图标时，布局就会不那么好看，所以这个方法使用场景也十分有限。

image.png

将图标设置为position:absolute绝对定位，再添加right:10%让图标往左移动，将pic-block设置为position:relative相对定位，这种方法能达到完全的自适应。图标的绝对定位让图标脱离文档流，使其不占用页面空间，flex布局的图片列表就能一直按照图片的空间(pic-block不设置width，其width由图片的width决定)进行弹性布局；相对布局的pic-block能让绝对定位的图标以它作为父节点(绝对定位以最近的非static布局的元素作为父节点)。这两点使图标一直保持在图片的靠右边10%的位置。(推荐)

最终效果

最终代码

Document

.pic-list {

display: flex;

height: 15.3vh;

margin-bottom: 1.7vh;

align-items: center;

justify-content: space-around;

}

.pic-list .pic-block-img {

height: 100%;

}

.pic-list .checked-small {

height: 20%;

position: absolute;

bottom: 2%;

right: 10%;

}

.pic-block {

position: relative;

height: 100%;

margin: 0 auto;

}

.hidden {

display: none;

}

let checkedPictures = new Set();

function checkPicture(id) {

if(checkedPictures.has(id)) {

checkedPictures.delete(id);

document.getElementById(id+'-checked').setAttribute("class", "hidden");

}

else {

checkedPictures.add(id);

document.getElementById(id+'-checked').setAttribute("class", "checked-small");

}

}