在uni-app中，新增图片时如果希望它们先水平铺满再换行，通常需要使用CSS来控制图片的布局。默认情况下，uni-app中的图片会像文字一样按照流式布局排列，不会自动水平铺满。因此，我们需要通过CSS Flexbox或Grid布局来实现这个需求。

下面是一个使用Flexbox布局实现图片水平铺满再换行的示例代码：

1. 在页面的WXML文件中

<view class="container">
  <view class="image-wrapper">
    <block wx:for="{{images}}" wx:key="index">
      <image class="image-item" src="{{item}}" mode="aspectFit"></image>
    </block>
  </view>
</view>

2. 在页面的WXSS文件中

.container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 可选，控制子元素之间的间距 */
}

.image-item {
  flex: 1 1 calc(33.333% - 10px); /* 每行3张图片，减去间距 */
  margin: 5px; /* 图片之间的间距 */
  max-width: calc(33.333% - 10px); /* 防止图片过大撑破容器 */
  box-sizing: border-box;
}

/* 如果需要响应式布局，可以添加媒体查询 */
@media (max-width: 768px) {
  .image-item {
    flex: 1 1 calc(50% - 10px); /* 每行2张图片 */
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .image-item {
    flex: 1 1 calc(100% - 10px); /* 每行1张图片 */
    max-width: calc(100% - 10px);
  }
}

3. 在页面的JavaScript文件中

Page({
  data: {
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg',
      // 更多图片URL
    ]
  }
});

在这个例子中，.image-wrapper使用了flex布局，并且设置了flex-wrap: wrap来允许换行。.image-item则通过flex: 1 1 calc(33.333% - 10px)来设置每行显示3张图片（考虑到间距），并且通过max-width来确保图片不会撑破容器。

注意，mode="aspectFit"确保了图片在保持宽高比的情况下进行缩放，这样图片不会因为容器大小而改变其比例。你可以根据需要调整flex属性和calc函数中的百分比值，以实现不同的布局效果。