利用CSS实现横向瀑布流的解决方案

最新推荐文章于 2024-05-03 22:21:39 发布
最新推荐文章于 2024-05-03 22:21:39 发布
阅读量1.6k 收藏 4
点赞数 2
分类专栏： html 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46219714/article/details/125003253
版权

今天给大家分享一种通过使用CSS来实现类似百度图片搜索效果的瀑布流布局的方案。
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>css实现横向瀑布流效果</title>
  <style>
    .wrapper {
      width: 1500px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      padding: 15px 5px;
    }

    .wrapper::after {
      content: "";
      flex-grow: 99999;
    }

    .wf-item {
      flex-grow: 1;
      margin: 5px;
      position: relative;
      overflow: hidden;
      height: 210px;
    }

    .wf-item .wf-img {
      background-size: cover;
      background-position: center;
    }

    img {
      min-width: 100%;
      height: 210px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="wf-item"><img src="img/1.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/2.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/3.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/4.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/5.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/6.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/7.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/8.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/9.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/10.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/11.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/12.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/13.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/14.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/15.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/16.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/17.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/18.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/19.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/20.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/21.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/22.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/23.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/24.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/25.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/26.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/27.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/28.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/29.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/30.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/31.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/32.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/33.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/34.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/35.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/36.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/37.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/38.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/39.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/40.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/24.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/25.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/26.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/27.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/28.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/29.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/30.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/31.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/32.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/33.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/34.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/35.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/36.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/37.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/38.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/39.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/40.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/1.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/2.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/3.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/4.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/5.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/6.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/7.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/8.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/9.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/10.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/11.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/12.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/13.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/14.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/15.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/16.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/17.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/18.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/19.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/20.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/21.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/22.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/23.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/24.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/25.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/26.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/27.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/28.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/29.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/30.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/31.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/32.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/33.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/34.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/35.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/36.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/37.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/38.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/39.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/40.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/24.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/25.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/26.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/27.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/28.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/29.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/30.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/31.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/32.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/33.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/34.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/35.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/36.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/37.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/38.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/39.jpg" alt="" class="wf-img" /></div>
    <div class="wf-item"><img src="img/40.jpg" alt="" class="wf-img" /></div>
  </div>
</body>

</html>

最终效果：
在这里插入图片描述

程序员禅心
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
瀑布流效果展示图片的实现（小demo）
qq_43437571的博客
09-30 1004
代码展示： 首先html页面中需要先在head中引入以下文件： <link rel="stylesheet" href="flow.css"> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script src="flow.js"></script> html页面： <div class="masonry"> <di
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
css实现瀑布流布局
最新发布
hexadecimal_001的博客
05-03 892
通过这种方式，我们可以实现一个简单的瀑布流布局，不需要额外的JavaScript代码。你可以根据实际需求调整列数、间距和元素样式等来实现不同的效果。瀑布流布局也可以通过纯CSS来实现，使用CSS的column属性可以实现多列布局。元素的宽度为100%以确保图片占满整个列，并设置。元素不会被分割到两列之间。属性设置列与列之间的间距。在这个示例中，我们使用CSS的。以消除图片之间的空隙。
如何使用CSS实现一个瀑布流布局？
官方推荐
08-17 9469
如何使用CSS实现一个瀑布流布局？
多列不等高布局之横向瀑布流和纵向瀑布流
BUG_CONQUEROR_LI的博客
01-02 765
多列不等高布局之横向瀑布流和纵向瀑布流
CSS实现瀑布流布局
Hui-1018的博客
08-25 1827
CSS实现瀑布流布局
css实现瀑布流空白处背景粉色背景块
12-13
在这个问题中，我们探讨如何利用CSS来实现一个瀑布流布局，并在空白区域设置粉色背景。 首先，我们需要创建一个容器，这里使用`.listbox`类作为外层容器。这个容器设置了相对定位（`position: relative;`），以允许...
jQuery图片的横向瀑布流.rar
08-21
综上所述，“jQuery图片的横向瀑布流”是一种利用jQuery和CSS实现的动态图片展示技术，它提供了丰富的视觉体验，增强了用户与网站的互动性。这种技术对于提升网站的用户体验和吸引力具有显著的作用，尤其适用于那些...
html+css+js瀑布流效果
06-06
JavaScript库如jQuery Masonry或Pure JavaScript实现的解决方案如 Infinite Scroll 可以帮助开发者轻松实现这一效果。 具体实现步骤如下： 1. 使用HTML创建基本的卡片元素，每个元素内部包含需要展示的内容。 2. ...
jQuery响应式横向瀑布流图片布局代码
06-10
同时，确保正确引入jQuery库和FlexImages插件，这样就能实现响应式的横向瀑布流图片布局。 总的来说，jQuery响应式横向瀑布流图片布局代码，如FlexImages，为网页设计师提供了一种强大的工具，能够在不同设备上创建...
jQuery响应式横向瀑布流图片布局代码.zip
09-25
总的来说，这个压缩包提供了一个完整的解决方案，展示了如何使用jQuery和CSS实现一个响应式的横向瀑布流图片布局。对于开发者来说，无论是直接使用还是作为学习参考，都是非常有价值的资源。有能力的开发者可以根据...
纯css3实现横向瀑布流布局，横向瀑布流代码.zip
07-20
纯css3实现横向瀑布流布局，让图片看起来更美观。
css实现瀑布流
haluodepaopao的博客
02-02 785
【代码】css实现瀑布流。
css 一行显示_IT学堂：纯CSS的瀑布流布局方法总结
weixin_39900023的博客
11-29 381
瀑布流布局出来好多年了，刚出来时，一般都采用js来实现，涌现了很多比较好的js插件，例如：masonry.js、gridify.js等等。这里就不再详说如何使用了，网上都能找到。今天讨论的是纯CSS实现瀑布流布局。一、多个列表并列的瀑布流布局法：这种布局方法非常简单，就是将多个列表横向排列，每个列表拥有的项都差不多。图片宽度固定，高度自动撑起来。html：css:.wrap{display:fle...
CSS实现横向瀑布流布局
C1oak的博客
11-26 1770
CSS实现横向瀑布流布局效果代码 效果 代码 <!--页面代码--> <view class="container"> <view class="label"> 水产养殖 </view> <view class="label"> 护理 </view> <view class="label"> 冬季水产养殖 </view> <view clas
固定布局、流式布局、弹性布局、自适应布局、响应式布局
weixin_62428841的博客
01-22 2814
享乐主义者好想吃炸鸡
CSS总结——瀑布流布局
热门推荐
qq_53008257的博客
05-07 4万+
瀑布流布局 瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式） 瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码 <div class="container" id="con"> <div class="item
Css3实现百度图片的横向瀑布流布局——内含解决object-fit兼容性问题
SHiny_Jun的博客
11-08 1万+
最近公司在做项目的时候需要用到横向瀑布流布局，在实现的过程中还遇到了object-fit兼容性问题，这里记录一下整个过程，想直接复制代码可以直接滚到底部。 在此先上个效果图： （希望不要吐槽里面的小哥哥）下面正题： 用的框架是vue，v-for一下： &lt;section&gt; // v-for就是根据imagesList数组去循环下面这个div部分。 &lt;div c...
【总结】1799- 5 种瀑布流场景的实现原理解析
pingan8787
09-09 137
5一、背景—本文介绍 5 种瀑布流场景的实现，大家可以根据自身的需求场景进行选择。5 种场景分别是：瀑布流特点纵向+高度排序纯 CSS 多列实现，是最简单的瀑布流写法纵向+高度排序+根据宽度自适应列数通过 JS 根据屏幕宽度计算列数，在 web 端更加灵活的展示瀑布流横向纯 CSS 弹性布局实现，是最简单的横向瀑布流写法横向+高度排序横向+高度排序的瀑布流，需要通过 JS 计算每一列高度，损耗性...
css横向展开的瀑布流
09-10
横向展开的瀑布流是一种CSS布局技术，用于实现类似瀑布流效果的水平滚动展示。在实现横向展开的瀑布流时，可以借助CSS的Flexbox布局或者CSS Grid布局来完成。 使用Flexbox布局时，我们可以将需要展示的元素放置在一个Flex容器内。通过设置容器的flex-wrap属性为nowrap，使得元素不会折行换行显示。然后，通过设置元素的flex属性来控制元素的宽度，使其能够在一行内水平展开。为了实现瀑布流效果，可以控制每个元素的高度不同，通过设置元素的align-self属性来调整元素在垂直方向上的对齐方式。 使用CSS Grid布局时，我们可以将需要展示的元素放置在一个Grid容器内。通过设置容器的grid-template-columns属性，定义每个列的宽度。可以使用repeat()函数来快速生成多个相同宽度的列。然后，可以通过设置元素的grid-row属性来控制元素的高度，使其能够在每一列内实现不同的高度。为了实现瀑布流效果，可以使用grid-auto-flow属性设置元素的排列方式为dense，使得元素会尽量填充空隙。 通过以上方式，我们可以使用CSS实现一个横向展开的瀑布流效果，使得元素能够在水平方向上展开，并且在垂直方向上实现不同高度的布局，从而呈现出瀑布流的效果。在实现时，可以根据具体需求选择Flexbox布局或者CSS Grid布局，来达到最佳效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员禅心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值