如何实现响应式垂直交错排列div，无需预先设定每行元素数量

实现方案 #

纯CSS即可实现你要的效果，无需额外JS逻辑，也不用给元素添加额外类名，完全适配响应式自动换行、移动端单列的需求：

完整修改后CSS代码

* {margin: 0; padding: 0;}
body {font-family: Helvetica Neue; font-style: normal; text-align: center; color: #111;}

section {width: 100%; display: flex; flex-direction: column;}
.memoji_list {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  padding-top: 10px;
}
.memoji {
  background: green; 
  border-radius:999px; 
  width:100px; 
  height:100px; 
  margin: 0 12px 24px;
}
/* 选择所有偶数位的圆形，添加顶部偏移实现交错效果 */
.memoji:nth-child(even) {
  margin-top: 50px;
}
/* 移动端响应式配置，屏幕宽度小于480px时生效 */
@media screen and (max-width: 480px) {
  .memoji {
    margin: 0 auto 16px;
  }
  /* 取消偶数元素的偏移，单列对齐 */
  .memoji:nth-child(even) {
    margin-top: 0;
  }
}

代码说明

• 无需预设每行元素数量：利用:nth-child(even)选择所有偶数位置的圆形添加50px顶部偏移，无论浏览器宽度自动排布多少个元素，都能自动形成交错效果
• 响应式适配：通过媒体查询在小屏设备下取消偶数元素的偏移，同时调整边距让元素自动变为单列展示
• 原有HTML代码无需做任何修改，直接替换CSS即可生效

内容的提问来源于stack exchange，提问作者Antistandard