css瀑布流布局源码

CSS瀑布流布局是一种常见的用于响应式网页设计的技术，它通过CSS定位属性和浮动（`float`）或 Flexbox 或 Grid 系统来创建自适应的、多列的网格。基本原理是元素会按照一定的方向（通常是从左到右，然后换行从上到下）流动，并尽可能地填满容器空间。

源码通常涉及以下几个关键部分：

1. **容器设置**：使用 `display: flex` 或 `display: grid` 将容器设为弹性盒子或网格布局，以便元素能动态调整位置。

.container {
   display: flex; /* 或者 display: grid; */
   flex-wrap: wrap; /* 或者 grid-wrap: wrap; */
}

2. **元素设置**：对子元素设置宽度，并可能使用 `flex-basis` 或 `grid-template-columns` 来指定基础宽度。

.item {
   width: calc(100% / 3); /* 如果有三列 */
   flex-basis: 33%; /* 或者 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
}

3. **浮动** (已过时)：对于旧版浏览器支持，可以使用 `float` 和 `clear` 属性实现类似效果。

.item {
   float: left;
   clear: both;
}

4. **响应式设计**：通过媒体查询（`@media`）来改变元素在不同屏幕尺寸下的行为。

@media screen and (max-width: 768px) {
   .item {
      width: 100%;
   }
}