前端 电商商品列表瀑布流布局代码

以下是一个简单的电商商品列表瀑布流布局代码示例，使用jQuery和Masonry插件实现：

HTML代码：

<div id="product-list">
  <div class="product">
    <img src="product1.jpg">
    <h3>Product 1</h3>
    <p>$50</p>
  </div>
  <div class="product">
    <img src="product2.jpg">
    <h3>Product 2</h3>
    <p>$75</p>
  </div>
  <div class="product">
    <img src="product3.jpg">
    <h3>Product 3</h3>
    <p>$100</p>
  </div>
  <div class="product">
    <img src="product4.jpg">
    <h3>Product 4</h3>
    <p>$25</p>
  </div>
  <div class="product">
    <img src="product5.jpg">
    <h3>Product 5</h3>
    <p>$125</p>
  </div>
  <div class="product">
    <img src="product6.jpg">
    <h3>Product 6</h3>
    <p>$150</p>
  </div>
</div>

CSS代码：

#product-list {
  margin: 0 auto;
}
.product {
  width: 300px;
  float: left;
  margin-bottom: 20px;
}
.product img {
  width: 100%;
  height: auto;
  display: block;
}
.product h3 {
  font-size: 18px;
  margin: 10px 0;
}
.product p {
  font-size: 16px;
  margin: 10px 0;
}

JavaScript代码：

$(document).ready(function() {
  $('#product-list').masonry({
    // 选项
    itemSelector: '.product',
    columnWidth: 300,
    isFitWidth: true
  });
});

在以上代码中，我们使用了Masonry插件来实现商品列表的瀑布流布局，通过设置itemSelector选项为'.product'，columnWidth选项为300，isFitWidth选项为true来控制每一列的宽度和自适应浏览器窗口大小。