纯css3实现横向瀑布流布局，横向瀑布流代码.zip

共14个文件

jpg：12个

html：1个

css：1个

1星需积分: 2 77 浏览量 2020-07-20 17:44:19 上传评论 1 收藏 137KB ZIP 举报

瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在展示图片或者商品时非常流行。这种布局的特点是每个元素（通常是图片）的宽度不固定，但它们的左侧边缘会对齐，形成一种自适应的错落效果，类似于自然状态下水从高处流下形成的瀑布。在传统的瀑布流布局中，元素通常是垂直排列的，但在本案例中，我们将讨论如何使用纯CSS3实现横向瀑布流布局。要理解CSS3中实现这一布局的关键技术。主要是使用`flexbox`（弹性盒模型）或`grid`（网格布局）。在这个例子中，我们很可能使用了`flexbox`，因为它是处理一维布局（行或列）的理想选择，而`grid`更适合二维布局。 1. **创建容器**：我们需要一个包含所有子元素的父容器，通常设置`display: flex`和`flex-wrap: wrap`。`flex-wrap: wrap`允许子元素在容器内换行，这是实现横向瀑布流布局的基础。 2. **设置对齐方式**：为了使子元素的左侧边缘对齐，我们可以使用`justify-content: flex-start`。这将使所有的子元素从左到右依次排列，当一行排满后自动换行。 3. **自适应宽度**：由于每个子元素的宽度可能不同，我们需要为它们设置百分比宽度，例如`width: 25%`。这使得子元素可以根据容器的宽度动态调整自身大小，保持横向排列。 4. **响应式设计**：为了在不同屏幕尺寸下保持美观，可以使用媒体查询(`media queries`)来调整布局。例如，对于小屏幕设备，可以减少每行显示的子元素数量。 5. **图片填充**：如果子元素是图片，可以使用`object-fit`属性来控制图片如何适应其容器。例如，`object-fit: cover`可以让图片充满容器并保持其纵横比，从而避免图片变形。 6. **实现瀑布流的关键**：在纯CSS3的横向瀑布流布局中，关键在于如何处理不同高度的子元素。通常，我们会使用JavaScript来动态计算和调整元素的位置，使其形成瀑布流效果。但CSS3中没有直接的原生方法实现这一点，因此，这个"纯CSS3"实现可能涉及了一些技巧，如使用伪元素、负margin等，以模拟瀑布流的视觉效果。这个压缩包中的"横向瀑布流代码"很可能包含了一个使用CSS3和可能的JavaScript技巧实现的横向瀑布流布局示例。通过深入研究这些代码，你可以学习到如何在没有依赖外部库的情况下，利用现代CSS3特性构建美观且响应式的图片布局。这不仅可以提高页面加载速度，还能增强你的前端开发技能。

资源推荐

资源详情

资源评论

收起资源包目录

横向瀑布流代码.zip （14个子文件）

横向瀑布流代码

index.html 6KB

images

4-2(1).jpg 10KB

2-4(1).jpg 25KB

2-3(1).jpg 17KB

4-1.jpg 7KB

4-3(1).jpg 8KB

4-2.jpg 8KB

4-4.jpg 13KB

4-1(1).jpg 8KB

4-3.jpg 9KB

2-4.jpg 7KB

2-2.jpg 17KB

2-3.jpg 7KB

css

style.css 2KB

<!DOCTYPE html> <html lang="en" style="overflow-y: auto;"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>自适应横向瀑布流效果 </title> <link rel="stylesheet" href="css/style.css"> </head> <body style="overflow-y: auto;">  <section class="gallery"> <div class="item"> <img src="images/2-2.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/2-3.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/2-4.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-1.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-2.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-3.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-4.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-3.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/2-2.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/2-3.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/2-4.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-1.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-2.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-3.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-4.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> <div class="item"> <img src="images/4-3.jpg" > <div class="dim-box"> <p class="text">分类：时政</p> <p class="text">大小：500*200</p> <div class="btn"> <button>详情</button> <button>删除</button> </div> </div> </div> </section> </body> </html>

评论收藏

内容反馈