瀑布流----商品展示样式

最新推荐文章于 2024-05-28 16:00:37 发布

zxf318

最新推荐文章于 2024-05-28 16:00:37 发布

阅读量836

点赞数 1

分类专栏：案列文章标签： html css 前端

本文链接：https://blog.csdn.net/zxf318/article/details/126353820

版权

瀑布流布局，一种常见的网页设计样式，常用于商品展示。它采用参差不齐的多栏布局，每栏宽度一致，但高度根据内容自动调整。这种布局通过HTML、CSS和JavaScript实现，其中CSS用于定义样式，JavaScript则用于动态加载和调整元素的高度，以形成流畅的滚动效果。

摘要由CSDN通过智能技术生成

又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局

宽度同，高度由内容撑开所以展现高度不同，此处给标签随机高度

HTML代码：

 <div class="shopBox">
        <!-- <div class="shop">商品1</div>
        <div class="shop">商品2</div>
        <div class="shop">商品3</div>
        <div class="shop">商品4</div>
        <div class="shop">商品5</div>
        <div class="shop">商品6</div>
        <div class="shop">商品7</div>
        <div class="shop">商品8</div>
        <div class="shop">商品9</div>
        <div class="shop">商品10</div>
        <div class="shop">