要在 HTML 中使用 CSS3 实现瀑布流布局效果，可以使用 CSS3 的多列布局和 Flexbox 布局。
下面是一个使用多列布局的示例：
<div class="container">
<div class="column">
<h3>标题</h3>
<p>内容</p>
</div>
<div class="column">
<h3>标题</h3>
<p>内容</p>
<p>内容</p>
</div>
<div class="column">
<h3>标题</h3>
<p>内容</p>
</div>
<div class="column">
<h3>标题</h3>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</div>.container {
column-count: 4;
column-gap: 20px;
}
.column {
break-inside: avoid;
}上面的示例中，container 是包含所有列的容器，column 是每一列的容器。column-count 属性指定了列数，column-gap 属性指定了列与列之间的间隔。break-inside 属性可以防止内容被分割到不同的列中。
另一种实现瀑布流布局效果的方法是使用 Flexbox 布局。下面是一个使用 Flexbox 布局的示例：
<div class="container">
<div class="item">
<h3>标题</h3>
<p>内容</p>
</div>
<div class="item">
<h3>标题</h3>
<p>内容</p>
<p>内容</p>
</div>
<div class="item">
<h3>标题</h3>
<p>内容</p>
</div>
<div class="item">
<h3>标题</h3>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</div>.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 200px;
margin: 10px;
}上面的示例中，container 是包含所有项目的容器，item 是每一个项目的容器。flex-wrap 属性指定了项目是否可以换行。flex 属性可以控制项目的大小和弹性。
在实际应用中，可以根据具体的需求来选择使用哪种布局方式。