在网页设计中，瀑布流商品展示布局能够以一种独特且吸引人的方式呈现商品，提升用户体验。使用 HTML 和 CSS 可以有效地实现这一布局效果。

首先是 HTML 部分。我们需要创建基本的结构。使用一个主容器来包裹所有的商品元素，例如可以使用 <div> 标签，并为其添加一个唯一的类名，如 product-container。在这个主容器内，为每个商品创建一个子容器，同样使用 <div> 标签，并赋予其特定的类名，比如 product-item。每个商品项内部可以包含商品图片、名称、价格等信息，例如：

<div class="product-container">
    <div class="product-item">
        <img src="product1.jpg" alt="商品 1">
        <h3>商品 1 名称</h3>
        <p>价格：100 元</p>
    </div>
    <div class="product-item">
        <img src="product2.jpg" alt="商品 2">
        <h3>商品 2 名称</h3>
        <p>价格：150 元</p>
    </div>
    <!-- 更多商品项 -->
</div>

接下来是 CSS 部分，这是实现瀑布流布局的关键。我们可以使用 CSS 的 column-width 和 column-gap 属性来创建多列布局，并设置列之间的间距。例如：

.product-container {
    column-width: 200px;
    column-gap: 20px;
}
.product-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
}
.product-item img {
    width: 100%;
    height: auto;
}

上述代码中，product-container 设置了列宽为 200px，列间距为 20px。product-item 作为商品项，通过 display: inline-block 使其能自适应列布局。同时设置了背景颜色、内边距等样式。商品图片则设置为宽度 100%，高度自适应。

为了让布局在不同屏幕尺寸下也能保持良好的显示效果，还可以结合媒体查询。比如在小屏幕设备上，减少列数，调整列宽：

@media (max-width: 600px) {
  .product-container {
        column-width: 150px;
    }
}

通过以上 HTML 和 CSS 的配合使用，就能轻松实现一个简洁美观的瀑布流商品展示布局，为用户带来流畅的浏览体验，也有助于提升网站的整体质量和用户吸引力。