flex实现瀑布流布局

最新推荐文章于 2024-08-02 16:18:47 发布
最新推荐文章于 2024-08-02 16:18:47 发布
阅读量4.7k 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43764814/article/details/104517330
版权
本文详细介绍了如何利用Flexbox布局实现动态瀑布流效果，包括元素的排列、间距调整和响应式设计，适用于网页和移动端展示项目。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 实现瀑布流布局（display: flex）</title>
</head>
<style>
.g-container {
    
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
  overflow: hidden;
}

.g-queue {
    
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  flex-basis: 24%;
}

.g-item {
    
  position: relative;
  width: 100%;
  margin: 2.5% 0;
}

.g-queue:nth-child(1) .g-item:nth-child(1) {
    
  height: 247px;
  background: #5a78a2;
}
.g-queue:nth-child(1) .g-item:nth-child(1)::after {
    
  content: "1";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(2) {
    
  height: 305px;
  background: #694271;
}
.g-queue:nth-child(1) .g-item:nth-child(2)::after {
    
  content: "2";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(3) {
    
  height: 180px;
  background: #923289;
}
.g-queue:nth-child(1) .g-item:nth-child(3)::after {
    
  content: "3";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(4) {
    
  height: 350px;
  background: #e42fa4;
}
.g-queue:nth-child(1) .g-item:nth-child(4)::after {
    
  content: "4";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(5) {
    
  height: 64px;
  background: #e719eb;
}
.g-queue:nth-child(1) .g-item:nth-child(5)::after {
    
  content: "5";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(6) {
    
  height: 160px;
  background: #68e35c;
}
.g-queue:nth-child(1) .g-item:nth-child(6)::after {
    
  content: "6";
  position: absolute;
  color: #fff;
  font-size: 24px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-queue:nth-child(1) .g-item:nth-child(7) {
    
  height: 322px;
  background: #ad1428;
}
.g-queue:nth-child(1) .g-item:nth-child(7)::after {
    
  content: "7";
最低0.47元/天 解锁文章
兔子零-A酱
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
瀑布流布局（CSS flex实现）
一起学习一起进步~
10-09 1271
【代码】瀑布流布局（CSS flex实现）
flex 布局瀑布流
weixin_44286765的博客
04-25 978
Document
个人技术总结——微信小程序实现瀑布流
m0_64752203的博客
06-03 1946
微信小程序中的瀑布流技术用于创建多列自适应布局，使内容展示更加灵活和丰富，适用于图片或卡片集合展示，增强视觉吸引力。学习原因包括提升用户界面设计感和交互体验。技术难点在于保证布局的响应式和性能优化，特别是在处理大量数据加载和不同屏幕尺寸适配时。在微信小程序中实现瀑布流布局是一种提升内容展示灵活性与丰富性的有效方式，尤其适合于图片和卡片集合的美观呈现，增强了用户的视觉享受和交互体验。
Flex布局，几行代码就可以实现瀑布流布局，代码简单，定制化强。
wu7zhi的博客
02-01 683
原理很简单，计算图片的宽高，再计算每列的使用高度，然后再将当前图片放置在列高最小的一列。其实这种方式使用什么方式布局都无所谓，我使用的是flexd布局。Flex的使用在这里就不讲解了，网上的教程一大堆。这里讲解使用VUE3实现，并封装成可以使用的组件。
利用flex布局实现瀑布流
最新发布
m0_59209041的博客
08-02 898
废话少说，先上代码。
瀑布流布局Flex
偏执
08-03 904
但其它属性可以是一样。同样的，响应式设置，使用Flexbox实现响应式布局比多列布局要来得容易，他天生就具备这方面的能力，只不过我们这里需要对容器的高度做相关的处理。Flexbox布局到今天已经是使用非常广泛的，也算是很成熟的一个特性。而且当我们的项目列表是动态生成，而且内容不好控制之时，这就更蛋疼了。可以设置成任何高度值（采用任何的单位），但不能不显式的设置，如果没有显式的设置，容器就无法包裹住项目列表。这里关键是容器的高度，示例中显式的设置了。方法来控制每个列的宽度，如果你希望是三列，那么可以设置。
vue实现简单瀑布流布局
11-21
在 Vue 中实现瀑布流布局可以提供一种美观且响应式的图片展示方式，使得元素在页面上自适应地排列，类似于瀑布逐级下落的效果。在这个场景中，我们将探讨如何使用 Vue 构建一个简单的瀑布流布局，并结合 `vue-lazy...
微信小程序-实现瀑布流布局demo源代码
05-08
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
详解纯css实现瀑布流（multi-column多列及flex布局）
09-22
实现瀑布流布局的方法有很多种，本文将介绍使用CSS3的multi-column多列布局以及flex布局来实现瀑布流布局。 首先，multi-column多列布局是CSS3提供的一种布局方式，可以很便捷地实现瀑布流布局。multi-column布局的...
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
6. **实现瀑布流的关键**：在纯CSS3的横向瀑布流布局中，关键在于如何处理不同高度的子元素。通常，我们会使用JavaScript来动态计算和调整元素的位置，使其形成瀑布流效果。但CSS3中没有直接的原生方法实现这一点，...
3种方式实现瀑布流布局小结
12-13
今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。 一、JS 实现瀑布流 思路分析 瀑布流布局...
纯css3 弹性布局瀑布流
11-04
纯css3 弹性布局瀑布流
使用flex实现瀑布流式布局
一出好剧
12-25 4718
flex实现瀑布流
column-gap和column-count 之纯css实现瀑布流
Pandora_417的博客
11-18 672
column-gap列之间的距离 column-count一行有多少列 <!-- * @Descripttion: 瀑布流 * @Author: Pandora * @Date: 2021-11-18 16:35:22 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con
瀑布流布局 flex实现（二）
雨水獭祭鱼
02-13 1891
使用flex 实现瀑布流布局 ,flex布局嵌套 + flex-basis 控制列宽
瀑布流布局的实现
weixin_42274805的博客
09-18 1405
瀑布流布局视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部​​ 瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。
使用flex盒子模型实现瀑布流布局
weixin_44286392的博客
07-04 3156
这个例子主要用到弹性盒子（Flexible Box 或 flex-box）布局。 1.flex-box是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。 flex-box是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 实现效果： flex-wrap属性用于指定弹性盒子的子元素换行方式
flex瀑布流（响应式配置）
Sqddian的博客
02-21 1834
flex布局 瀑布流 响应式
flex实现瀑布流
热门推荐
small_shadow的博客
11-23 1万+
利用flex等分和弹性的特点，可以很轻松实现瀑布流布局，但是适用范围不广，比较适合数据量较少或者静态页面，因为这种写法从后端拿数据过来后得动态生成列数，可以实现，但是略微麻烦，这里不做解释。 最后效果 sass代码 .waterfall_box display: flex flex-wrap: wrap .box_column display: flex flex-direction: column div m
flex布局实现瀑布流
08-06
要使用 Flex 布局实现瀑布流布局，可以按照以下步骤进行操作： 1. 创建一个包含所有瀑布流项的容器元素，例如一个 `<div>` 元素。 2. 将容器元素的 `display` 属性设置为 `flex`，以启用 Flex 布局。 3. 设置容器元素的 `flex-wrap` 属性为 `wrap`，以使内容可以自动换行到下一行。 4. 将容器元素的 `justify-content` 属性设置为 `space-between`，以在每行中平均分配项目并在项目之间留出空白。 5. 为每个瀑布流项创建一个子元素，并设置它们的宽度和高度。 6. 如果需要不同列之间的间距，可以为容器元素添加 `gap` 属性来设置列间距。 以下是一个示例代码： ```html <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; /* 可选，用于设置列之间的间距 */ } .item { width: 100px; /* 设置瀑布流项的宽度 */ height: auto; /* 设置瀑布流项的高度，可以根据需求进行调整 */ } </style> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> ... </div> ``` 在上述代码中，瀑布流项的宽度可以根据需求进行调整，而高度则可以根据内容的多少自适应。通过设置 `justify-content: space-between`，项目将在每行中均匀分布，并在项目之间留出空白。通过设置 `gap` 属性，可以调整列之间的间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值