如何用JavaScript排序HTML元素以匹配指定布局模式？

背景 #

网站包含两种新闻类型元素：

• .news-normal（普通新闻）：占25%宽度
• .news-featured（精选新闻）：占50%宽度

原本按日期排序会导致页面行内出现25%的空白区域，需要将元素重新排序，匹配特定的布局模式。预期的排序模式示例如下：

// 简化版逻辑：['a','a','b','a','b','a','b','a','a', ...rest]
const expectedArray = ['.news-normal', '.news-normal', '.news-featured', '.news-normal', '.news-featured','.news-normal', '.news-featured', '.news-normal', '.news-normal', ...rest]

尝试的方法及问题 #

我原本计划通过querySelectorAll获取所有新闻元素，将每个元素与预期数组对应索引的类型对比，不匹配的就移到数组末尾，但这个方法的结果不符合预期。

尝试的代码如下：

// const allNews = document.querySelectorAll('.news')
const allNews = ['.news-featured', '.news-featured', '.news-normal', '.news-normal', '.news-featured','.news-normal', '.news-featured', '.news-featured', '.news-featured', '.news-normal' ]
const expectedArray = ['.news-normal', '.news-normal', '.news-featured', '.news-normal', '.news-featured','.news-normal', '.news-featured', '.news-normal', '.news-normal',]

allNews.forEach((element, index) => {
  if (element !== expectedArray[index]) {
    allNews.splice(index, 1)
    allNews.push(element)
  }
})

console.log(allNews)

// 输出结果 ❌
// allNews = ['.news-featured', '.news-normal', '.news-featured', '.news-normal', '.news-featured', '.news-normal', '.news-featured', '.news-normal', '.news-featured', '.news-featured']

求助 #

请问解决这类按特定模式排序元素的问题，有什么技巧或最佳实践？

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