多列布局实现瀑布流结构布局

最新推荐文章于 2024-03-19 16:15:48 发布
最新推荐文章于 2024-03-19 16:15:48 发布
阅读量358 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43720739/article/details/105059034
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: rgb(58, 67, 76);
        background: url(../img/a.png), url(../img/bg.gif) rgb(58, 67, 76);
      }
      .box {
        column-count: 5;
        column-gap: 0;
        padding: 0 50px;
      }
      figure {
        border: 2px solid pink;
        padding: 5px;
        break-inside: avoid;
        color: rgb(255, 192, 203);
        text-align: center;
        font-size: 20px;
        margin: 0 5px 5px;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <audio
        src="../audio/zhoujie.mp3"
        controls="controls"
        autoplay="autoplay"
      ></audio>
      <figure>
        <img src="../img/1.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/2.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/3.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/4.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/5.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/6.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/7.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/8.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/9.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/10.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/11.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/12.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/13.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/14.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/15.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/16.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/17.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/18.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/19.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/20.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/21.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/22.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/23.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/24.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/25.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/26.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/27.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/28.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
      <figure>
        <img src="../img/29.jpg" alt="" />
        <figcaption>往后余生，平淡是你</figcaption>
      </figure>
    </div>
  </body>
</html>

效果图：
效果1

Rainbow~小二
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现简单瀑布流布局
10-15
在本文中，我们将深入探讨如何使用Vue.js实现一个简单的瀑布流布局。瀑布流布局是一种常见的网页设计模式，它通常用于展示图像或内容，如社交媒体、电商产品列表等。这种布局的特点是容器宽度固定，而高度根据内容...
高性能的两列瀑布流
weixin_45424044的博客
02-15 933
1.两列的瀑布流，需要两列容器，容器需要用定位来实现，这样才能保证瀑布流的成型 2.将数据源存储在一个变量中，给里面的每条数据添加高度（height必填）、唯一标识（id必填) 和其他需要的字段 3.定义左右容器的变量，各自存储左右所需要的数据 4.将源数据通过遍历的形式，对比两侧高度差，来决定此条数据存储到哪个变量中
CSS总结——瀑布流布局
m0_67401660的博客
08-01 2636
瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感，今天学习了一下如何使用瀑布流布局，总结了有以下三种方式。（瀑布流还可以使用grid布局实现，还没有学习过这种方式）瀑布流的实现方法可以用纯CSS，也可以用JS实现，如何选取决于需求,这几种方法各有优略，如何选取取决于需求。以下案例均采用如下的html代码。...
css 一行显示_IT学堂：纯CSS的瀑布流布局方法总结
weixin_39900023的博客
11-29 385
瀑布流布局出来好多年了，刚出来时，一般都采用js来实现，涌现了很多比较好的js插件，例如：masonry.js、gridify.js等等。这里就不再详说如何使用了，网上都能找到。今天讨论的是纯CSS实现瀑布流布局。一、多个列表并列的瀑布流布局法：这种布局方法非常简单，就是将多个列表横向排列，每个列表拥有的项都差不多。图片宽度固定，高度自动撑起来。html：css:.wrap{display:fle...
鸿蒙开发之瀑布流&宫格布局
karision的博客
03-19 1353
瀑布流布局适用于卡片式结构。折叠态的单列卡片，到展开态显示双列卡片，不同高度的卡片形成错落有致的瀑布流布局。可以有效提升页面的浏览效率和可视化效果。瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。说明该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
详解纯css实现瀑布流（multi-column多列及flex布局）
09-22
主要介绍了详解纯css实现瀑布流（multi-column多列及flex布局）的相关资料，用multi-column多列布局及flex布局实现瀑布流，感兴趣的小伙伴们可以参考一下
多列实现布局流.zip
01-21
在这个名为“多列实现布局流.zip”的压缩包文件中，我们可以找到一个静态的多列瀑布流布局实例。静态页面意味着所有内容在加载时已经确定，不涉及动态数据的获取或更新，因此它主要依赖HTML、CSS来实现。如果需要...
瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局
09-25
此外，还可以利用CSS3的`column-count`属性或者第三方库如Masonry、Isotope等来实现更为复杂的瀑布流布局效果，以满足更丰富的场景需求。 总的来说，选择哪种布局方式取决于项目的需求和约束。对于静态页面和简单的...
2.9 瀑布流效果-多列布局
学习交流记录
05-06 454
瀑布流效果-多列布局
瀑布流布局 WaterfallLayout
05-22
瀑布流布局，http://blog.csdn.net/qq_18983205/article/details/72630547对应的代码
瀑布流布局原理及详解
我是段段的博客
12-13 1万+
文章目录前言原生JS实现瀑布流flex属性实现瀑布流列数动态的瀑布流 前言   在写项目的过程中，整个页面分成了3列，每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，所以就在网上查了下，这种布局方式叫做瀑布流布局 原生JS实现瀑布流 首先对原生JS实现瀑布流布局的原理进行分析： 瀑布流布局最大的特点就是等宽不等高 使用瀑布流布局可以使页面最后一行的容器高度差距最小，所以从第二行开始，每一个容器都要放在第一行容器高度最小的下方，以此类推 将所有容器（子元素）放在一个大容器（父
css3——多列布局、瀑布流
肖的博客
02-19 2315
colum-count：属性设置列的具体个数 colum-width：属性控制列的宽度 column-gap：两列之间的列间距 column-rule：规定列之间的分割线的宽度、样式和颜色 column-span：规定元素应横跨多少列（1：不跨列（默认）；all：跨所有列） 实例： &amp;lt;style&amp;gt; div { width: 100%; ...
各大瀑布流简析与建议
weixin_33751566的博客
04-18 236
很难说这东西是什么时候山寨到国内，反正现状就是一涌而上，到处是瀑布流。瀑布流的鼻祖是Pinterest，图片网。图片网令我想起了各种相册，如最著名的Flickr。但区区Pinterest一小站，能够独行特立，引领潮流，可见创新的力量。 snatchly.com 最棒的瀑布流 不解释 瀑布流有两大元素，图片与无限拖。图片要力求鲜丽夺目，毕竟它的每一张图片就是一个广告。因为瀑布流就是一个广告墙，琳...
Android ListView功能扩展，实现高性能的瀑布流布局
热门推荐
郭霖的专栏
10-08 5万+
经过前面两篇文章的学习，我们已经对ListView进行了非常深层次的剖析，不仅了解了ListView的源码和它的工作原理，同时也将ListView中常见的一些问题进行了归纳和总结。 那么本篇文章是我们ListView系列三部曲的最后一篇，在这篇文章当中我们将对ListView进行功能扩展，让它能够以瀑布流的样式来显示数据。一直关注我博客的朋友们应该知道，其实在很早之前我就发布过一篇关于实现瀑布流布局的文章，Android瀑布流照片墙实现，体验不规则排列的美感。但是这篇文章中使用的实现算法比较简单，其实就是在
两列瀑布流_CSS实现瀑布流布局方式(2)
weixin_36176386的博客
01-15 1751
之前，我们用的是一个相对来说比较复杂的方式来实现一个瀑布流式布局。回顾上一章:CSS实现瀑布流布局方式(1)代码搬运工--D，公众号：ElegantCodeCSS实现瀑布流式布局方式(1)利用Html设置两列布局，主要用到的有弹性布局的方式，今天小编将为大家介绍另外一个简单的方式实现瀑布流式布局。同样，我们先新建文件,用简单的代码进行演示：<body><div...
前端页面--瀑布流布局的实现
荆轲刺秦王
04-24 1081
前端页面--瀑布流布局的实现： html：差不多就是这种结构，source-item为瀑布流盒子 <div class="source-content"> <div class="source-item"></div> <div class="source-item"></div> <div cl...
css页面特效--多列与瀑布流效果
hepei_i的博客
05-08 4424
1、多列在css3中，可以创建多列来对文本或者区域进行布局属性：    column-count：列数    column-gap：距离    column-rule：线及线的颜色HTML文件为：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;tit
css grid布局实现瀑布流
最新发布
05-25
瀑布流布局是一种常见的网页布局方式，可以让图片或者其他元素依次排列，并且每一列的高度相等，使页面呈现出瀑布流的效果。使用 CSS Grid 布局可以实现瀑布流布局，具体步骤如下： 1. 在父元素上应用 grid 布局，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值