grid布局实现双列瀑布流

Grid布局是CSS3中的一种布局方式，可以轻松实现双列瀑布流。具体实现步骤如下：

1. 使用grid布局，并设置为两列。如下所示：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

2. 设置每个子元素的高度。我们可以使用JavaScript动态计算每个子元素的高度，然后将其设置为grid布局中的grid-row-end属性值。如下所示：

var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
  var span = Math.ceil(items[i].querySelector('.content').offsetHeight / 10);
  items[i].style.gridRowEnd = 'span ' + span;
}

这里使用了Math.ceil()方法来计算每个子元素高度，并将其设置为grid-row-end属性的值。

3. 完成上述步骤后，即可实现双列瀑布流效果。