论坛 › 电脑技术 › 用react实现画廊效果：

legs+ 发表于 2025-3-6 19:50:57

用react实现画廊效果：

card是静态的，下面是动态

legs+ 发表于 2025-3-6 19:54:49

下面是动态的，但是我还是觉得上面的好

legs+ 发表于 2025-3-6 19:57:09

上面的效果，用css写的，只有如下寥寥数行

.cards {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.card {
flex: 0 0 200px;
margin: 10px;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}

.card img {
max-width: 100%;
}

.card .text {
padding: 0 20px 20px;
}

.card .text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}



但是，下面的我就写了两百行

legs+ 发表于 2025-3-7 11:14:14

顺便写了一个masonry layout

查看完整版本: 用react实现画廊效果：