使用Vue制作可展开卡片时右侧留空、整行下移问题如何解决

问题定位 #

问题出在你使用的布局代码上，和卡片展开逻辑无关。

原因说明 #

你当前用的是Vuetify默认的flex栅格布局，v-layout row wrap的底层是弹性盒布局，flex容器的同一行所有元素默认共享行高：只要某一行里有一张卡片展开高度增加，整行的高度都会被同步拉高，自然会出现「右侧同排区域留空、下一行所有卡片整体下移」的现象，不符合你要的瀑布流错落布局效果。

解决方案 #

方案1：调整栅格结构（无需额外依赖） #

不要用全局的行包裹所有卡片，改为按列分组布局：比如你当前lg3配置对应大屏下每行4张卡片，就把原列表数据按4个一组拆分为二维数组，每一组对应一列，列内部纵向排列卡片。这样某张卡片展开时，只会推挤同一列下方的卡片，不会影响其他列。
示例代码如下：

<v-container class="pt-0 mt-0">
  <v-layout row>
    <!-- 大屏4列、中屏2列、小屏1列，和原响应式规则对齐 -->
    <v-flex xs12 md6 lg3 v-for="(cardCol, colIndex) in formattedCardList" :key="colIndex">
      <v-layout column>
        <MakeTheCard 
          v-for="stateCard in cardCol" 
          :key="stateCard.name" 
          :item="stateCard"
        />
      </v-layout>
    </v-flex>
  </v-layout>
</v-container>

你只需要新增一个计算属性formattedCardList，把原filteredSearch数组按当前响应式断点对应的列数拆分即可。

方案2：使用瀑布流专用实现 #

如果不想改动数据结构，可以直接用CSS多列布局column-*属性，或者引入masonry-layout这类轻量瀑布流库实现效果，不用改动现有卡片的遍历逻辑。

另外注意你现有代码里的笔误：v-for遍历的变量是stateCard，但传给MakeTheCard的item属性写的是infoCard，记得修正避免数据异常。

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