css瀑布流 从左往右排列

要实现从左往右排列的CSS瀑布流，可以使用flexbox或grid布局。以下是使用flexbox实现的示例代码：

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .item {
    width: calc(33.33% - 10px);
    margin: 5px;
  }
</style>

<div class="container">
  <div class="item" style="height: 100px; background-color: red;"></div>
  <div class="item" style="height: 150px; background-color: blue;"></div>
  <div class="item" style="height: 120px; background-color: green;"></div>
  <div class="item" style="height: 80px; background-color: yellow;"></div>
  <div class="item" style="height: 200px; background-color: pink;"></div>
  <div class="item" style="height: 90px; background-color: orange;"></div>
</div>

在这个示例中，我们使用了flexbox布局，并将容器设置为`flex-wrap: wrap`，这样当子元素超出容器宽度时，会自动换行。我们还将子元素的宽度设置为`calc(33.33% - 10px)`，这样每行最多可以容纳三个子元素，并且子元素之间有5px的间距。最后，我们将容器的对齐方式设置为`justify-content: flex-start`，这样子元素会从左往右排列。