需求：实现Material Design编织图片列表的Vue.js布局算法

Let's get that Material Design weaved image list working exactly like the Shrine example! The issue with your original parity check is that it doesn't account for flipping the pattern every row—here's a straightforward JavaScript/Vue solution to implement the A B A B → B A B A alternating row pattern (where A = flex30, B = flex20).

Core Logic Breakdown #

Since we want 4 images per row, we need to:

1. Calculate which row each image is in (using Math.floor(index / 4)).
2. Check if the row is even or odd to determine the pattern.
3. Assign the correct class based on the image's position within the row.

• Even rows (0, 2, 4...): Follow the pattern flex30 → flex20 → flex30 → flex20
• Odd rows (1, 3, 5...): Reverse the pattern to flex20 → flex30 → flex20 → flex30

Vue Implementation #

Here's how to integrate this into your component:

<template>
  <div class="weaved-image-list">
    <div
      v-for="(image, index) in imageCollection"
      :key="index"
      :class="getImageSizeClass(index)"
    >
      <img :src="image.src" :alt="image.alt" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageCollection: [
        // Add your image objects here (src, alt, etc.)
      ],
    };
  },
  methods: {
    getImageSizeClass(index) {
      const rowNumber = Math.floor(index / 4);
      const positionInRow = index % 4;

      // Even rows use A B A B; odd rows use B A B A
      if (rowNumber % 2 === 0) {
        return positionInRow % 2 === 0 ? "flex30" : "flex20";
      } else {
        return positionInRow % 2 === 0 ? "flex20" : "flex30";
      }
    },
  },
};
</script>

<style scoped>
.weaved-image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1%; /* Adds consistent spacing between images */
}

.flex20 {
  max-width: calc(20% - 0.75%);
  flex-basis: calc(20% - 0.75%);
}

.flex30 {
  max-width: calc(30% - 0.75%);
  flex-basis: calc(30% - 0.75%);
}

/* Ensure images fit their containers properly */
img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Preserves aspect ratio, crops excess if needed */
  display: block;
}
</style>

CSS Adjustment Note #

The calc() in the flex classes accounts for the 1% gap between items. Without this, the total width of 4 items plus gaps would exceed the container width. The math checks out:

• 2x calc(30% - 0.75%) + 2x calc(20% - 0.75%) + 3x 1% gap = 100% total width

Testing the Pattern #

Let's verify with the first 8 images (two rows):

• Indexes 0-3 (Row 0, even): flex30, flex20, flex30, flex20 → A B A B
• Indexes 4-7 (Row 1, odd): flex20, flex30, flex20, flex30 → B A B A

This exactly matches the A B A B B A B A pattern you're aiming for!

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