.waterfall {
    width: 100%;  /*默认宽度*/
    /* margin: 20px 10vw;  */
    columns: 4;     /*居中,四列*/
    column-gap: 15px; /* 列间距 */
    
  }
.item {
width: 100%;
break-inside: avoid;
margin-bottom: 10px;
}

.item img {
width: 100%;
border: 2px solid white;
border-radius: 2%;
}

@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
    .masonry {
      width: 96vw;
      columns: 3;
      column-gap: 20px;
    }
  }

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
.masonry {
    width: 96vw;
    columns: 2;
    column-gap: 20px;
}
}


@media screen and (max-width: 767.98px) {
.masonry {
    width: 96vw;
    columns: 1;
}
}