css3实现图片瀑布流,根据屏幕大小列可变和不可变的的瀑布流

前提是每张图片宽度要设置成一样,准备15张图测试

                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
                

                    
                
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

1.屏幕大小列可变column实现,设置默认每列的图片宽度

 //瀑布流column实现
 .img-main {
    //宽度200px 
    column-width: 300px;
    //列之间间隔2px 
    column-gap: 2px;
}
.img-main>div>img {
    width: 100%;
} 
1
2
3
4
5
6
7
8
9
10

2.屏幕大小列可变2 @media来控制

/* //瀑布流column实现 */
.img-main {
    /* 设置列数 改变屏幕大小@media 来控制-实现 默认1列-可自动改变  */
    column-count: 1;
    /* 列之间间隔2px  */
    column-gap: 2px;
      /* 设置每个item的底部间距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不变形设置,默认宽大小 */
    width: 100%;
    /* 设置每个item的底部间距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止图片被拆分到两列 */
}

/* 使用媒体查询，根据屏幕大小来调整列数 */
@media (min-width: 768px) {
    .img-main {
        column-count: 3;
        /* 屏幕宽度大于等于768px时，设置为3列 */
    }
}

@media (min-width: 1024px) {
    .img-main {
        column-count: 6;
        /* 屏幕宽度大于等于1024px时，设置为4列 */
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3.不可变-屏幕大小列不可变

.img-main {  
  column-count: 4; /* 设置列数为4 */  
  column-gap: 10px; /* 设置列之间的间距 */  
}  
.img-main>div {  
  margin-bottom: 10px; /* 设置每个item的底部间距 */  
  break-inside: avoid; /* 防止图片被拆分到两列 */  
}  
.img-main>div>img {  
  width: 100%; /* 图片宽度自适应列宽 */  
  height: auto; /* 图片高度自适应以保持原始比例 */  
}
1
2
3
4
5
6
7
8
9
10
11
12

4.不可变-屏幕大小列不可变

/* //瀑布流column实现 */
.img-main {
    /* 默认5列  */
    column-count: 5;
    /* 列之间间隔2px  */
    column-gap: 2px;
      /* 设置每个item的底部间距 */
    margin-bottom: 2px;
}

.img-main>div>img {
    /* 不变形设置,默认宽大小 */
    width: 100%;
    /* 设置每个item的底部间距 */
    margin-bottom: 2px;
    /* break-inside: avoid; */
    /* 防止图片被拆分到两列 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.可变-可变js来实现-屏幕大小列可变

  .img-main {
            position: relative;
        }
        .img-main>div>img {
            width: 200px;
            vertical-align: top;
            padding: 5px;
        }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52