用react实现画廊效果：

card是静态的，下面是动态

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

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

1. .cards {
   
2.   display: flex;
   
3.   flex-wrap: wrap;
   
4.   align-items: center;
   
5. }
   
6. 
   
7. .card {
   
8.   flex: 0 0 200px;
   
9.   margin: 10px;
   
10.   border: 1px solid #ccc;
    
11.   box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    
12. }
    
13. 
    
14. .card img {
    
15.   max-width: 100%;
    
16. }
    
17. 
    
18. .card .text {
    
19.   padding: 0 20px 20px;
    
20. }
    
21. 
    
22. .card .text > button {
    
23.   background: gray;
    
24.   border: 0;
    
25.   color: white;
    
26.   padding: 10px;
    
27.   width: 100%;
    
28. }
    

复制代码

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

顺便写了一个masonry layout