瀑布流布局（Masonry Layout）中，单数和双数子节点的顺序可能会因布局算法而变得不规则。为了在这种情况下应用不同的样式，我们可以通过 JavaScript 来动态添加类，以便更精确地控制样式。

通过 JavaScript 根据元素的视觉位置进行样式设置。

HTML 示例

<div class="masonry">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

CSS 示例

.masonry {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: calc(50% - 1em); /* Half of the container width with margin */
  margin: 0.5em;
  box-sizing: border-box;
  background-color: #ccc; /* Default background color */
}

/* Specific styles for odd and even classes */
.masonry .item.odd {
  background-color: lightblue;
}

.masonry .item.even {
  background-color: lightgreen;
}

JavaScript 示例

document.addEventListener('DOMContentLoaded', function() {
  const items = document.querySelectorAll('.masonry .item');

  function updateClasses() {
    items.forEach((item, index) => {
      // Use index to determine odd or even, considering the actual DOM order
      if (index + 1 % 2 === 0) {
        item.classList.add('even');
        item.classList.remove('odd');
      } else {
        item.classList.add('odd');
        item.classList.remove('even');
      }
    });
  }

  // Call the function initially
  updateClasses();

  // Optionally, call this function after any layout changes
  // Example: if using a library like Masonry.js, bind to its layoutComplete event
  // msnry.on('layoutComplete', updateClasses);
});

解释

1. HTML：保持原有的结构不变。
2. CSS：使用 calc() 函数设置每个 .item 元素的宽度为容器宽度的一半，同时给每个元素添加间距，使得它们在容器中能够呈现两列布局。然后通过 .odd 和 .even 类为奇数和偶数项添加不同的背景颜色。
3. JavaScript：在页面加载完成后，根据每个节点在 DOM 中的实际位置来确定奇偶性，然后为其添加相应的类名。

这样，就可以确保在瀑布流布局中，根据节点在 DOM 中的实际位置来应用奇偶样式。