使div根据每个内容的大小从下到上递增

<div class="content" id="content1">Content 1</div>
<div class="content" id="content2">Content 2</div>
<div class="content" id="content3">Content 3</div>

.content {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
  order: 0;
}

// 获取每个内容的大小
var content1 = document.getElementById("content1").getBoundingClientRect().height;
var content2 = document.getElementById("content2").getBoundingClientRect().height;
var content3 = document.getElementById("content3").getBoundingClientRect().height;

// 创建一个对象数组，包含内容的大小和对应的ID
var contents = [
  { id: "content1", size: content1 },
  { id: "content2", size: content2 },
  { id: "content3", size: content3 }
];

// 根据内容大小从下到上递增排序
contents.sort(function(a, b) {
  return b.size - a.size;
});

// 更新每个内容的顺序
for (var i = 0; i < contents.length; i++) {
  document.getElementById(contents[i].id).style.order = i;
}