动态列表不固定行数不固定列数固定间距自适应布局

不通屏幕尺寸的大小

不满一行时从左往右排列

<ul class="logry-box">
      <li v-for="(item,index) in 30" :key="index">
        <img
          src="https://img0.baidu.com/it/u=666564652,1556614858&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=b56046ccb0970f39b901f98ef09e41bc"
        />
      </li>
    </ul>

.logry-box {
	padding: 0 24px;
}
.logry-box li{
  display:inline-block;
  margin-bottom:40px;
}
.logry-box li img {
	width: 100%;
}

@media (max-width:1200px) {
  .logry-box li{
    width:calc((100% - 48px)/4);
  }
  .logry-box li:nth-child(4n) {
    margin-left:0;
    margin-right:0;
  }
  .logry-box li{
    margin-right:16px;
   }
}
@media (min-width:1201px) and (max-width:1349px) {
  .logry-box li{
    width:calc((100% - 64px)/5);
  }
  .logry-box li:nth-child(5n) {
    margin-left:0;
    margin-right:0;
  }
  .logry-box li{
    margin-right:16px;
   }
}
@media (min-width:1350px) and (max-width:1600px) {
  .logry-box li{
    width:calc((100% - 80px)/6);
  }
  .logry-box li:nth-child(6n) {
    margin-left:0;
    margin-right:0;
  }
  .logry-box li{
    margin-right:16px;
   }
}
@media (min-width:1600px) and (max-width:2000px) {
  .logry-box li{
    width:calc((100% - 96px)/7);
  }
  .logry-box li:nth-child(7n) {
    margin-left:0;
    margin-right:0;
  }
  .logry-box li{
    margin-right:16px;
   }
}
@media (min-width:2001px) {
  .logry-box li{
    width:calc((100% - 112px)/8);
  }
  .logry-box li:nth-child(8n) {
    margin-left:0;
    margin-right:0;
  }
  .logry-box li{
    margin-right:16px;
   }
}