用JavaScript写一个弹性布局的框架

弹性布局框架可以使用CSS3的Flexbox实现。以下是一个使用JavaScript实现的基本示例：

HTML:

<div id="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS:

#flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-item {
  width: 30%;
  margin-bottom: 20px;
  background-color: #eee;
  height: 100px;
}

JavaScript:

var container = document.getElementById("flex-container");

function resizeItems() {
  var items = container.getElementsByClassName("flex-item");
  var itemWidth = items[0].offsetWidth;
  var containerWidth = container.offsetWidth;
  var columns = Math.floor(containerWidth / itemWidth);
  var margin = (containerWidth - (columns * itemWidth)) / (columns - 1);
  var rows = Math.ceil(items.length / columns);

  for (var i = 0; i < items.length; i++) {
    items[i].style.marginRight = (i % columns === columns - 1) ? "0" : margin + "px";
    items[i].style.marginBottom = (i >= (columns * (rows - 1))) ? "0" : "20px";
  }
}

resizeItems();
window.addEventListener("resize", resizeItems);

在这个示例中，我们使用JavaScript来计算每个项目的宽度和容器的宽度，然后计算出列数和每列之间的间距。接着，我们设置每个项目的右边距和下边距，以便它们可以自动布局。

当调整窗口大小时，我们监听窗口的resize事件，并重新计算项目的布局。