真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式!

2023-11-09

两行css如下:
```
<style scoped> 
  .waterfall-container {
    /*分几列*/
    column-count: 2;
  }

  .waterfall-item {
    /*不留白,不知道什么意思可以取消这个样式试试*/
    break-inside: avoid;
  }
</style>
```

```
/*列间距,可有可无,默认30px*/
/*column-gap: 0;*/
```

效果图如下:

说明:不存在一边列表过长问题,很均匀,没有缺点

2019年1月12日
我用的chrome 版本 70.0.3538.102(正式版本) (64 位)
以上代码没有问题,如果你用的老版浏览器可能存在兼容问题,就再多加几个重复的兼容浏览器的属性就行了,如下:
```
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;

```
以此类推

html代码大致如下:

```
<div class="waterfall-container">
    <div class="waterfall-item" v-for="i in 100"> vue的语法,不会就粘贴20个div看效果
        内容... 这里可以自己实现宽高不一样的div,看效果
    </div>
</div>
```


之前还用flex实现了一个,有坑,一边太长,一边太短,请先大致了解flex,写过demo再往下看,效果图如下:

实现方式如下:

一行里面两列,可以控制每列数量相等,

每列里面各自循环,下面伪代码

但是有个坑,如果左边都很高,右边比较矮,就会出现右边空很多的内容, 在找解决办法

下面的 <row> 指的是
css:
```
.row{
    display:flex;
    flex-direction:row;
}
```
 <col>同理
```
<row>
    <col width=50%>
         <div v-for='i fo 50'>
    </col>
    <col width=50%>
        <div v-for='i fo 50'>
    </col>
</row>
```
 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式! 的相关文章

  • NodeJS Express 中每个请求的全局范围

    我有一个基本的快速服务器 需要在每个请求处理期间存储一些全局变量 更深入地说 请求处理涉及许多需要存储在变量中的操作 例如global transaction 当然 如果我使用global范围 每个连接都将共享其事务的信息 并且我需要一个全
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • 我可以在 Express POST 请求中进行 DOM 操作吗?

    我正在使用基本的 HTML CSS 前端 目前有一个登陆页面 上面有一个表单 可将 一些数据发送到数据库 当请求完成后 它期待某种响应 在这种情况下 我正在重新渲染页面 但是 我想用某种感谢消息替换表单 以便用户知道它已正确发送 我尝试过简
  • Puppeteer 错误 错误:等待选择器超时

    目前我有一个网站 其 HTML 中有此内容 我通过检查chrome开发者工具中的元素确认了这一点 div class hdp photo carousel div class photo tile photo tile large 我直观地
  • 降低 Nodejs 服务器上的 CPU 利用率

    我正在研究降低 CPU 利用率的有趣方法 在 NodeJS 服务器上 在我的研究过程中 我发现了以下文章 http engineering linkedin com nodejs blazing fast nodejs 10 perform
  • Firestore onSnapshot() 方法多次触发

    我有一个带有多个路由和 vuex 的 vue cli 4 应用程序 Firestore 数据库已成功连接 我的应用程序立即反映从 Firestore 控制台应用于数据库的修改 在离开包含与 Firestore 同步 的组件的路线然后返回后
  • border-radius 在 safari 下失败(丑陋的剪辑)

    有人知道 Safari 中以下 错误 的解决方法吗 当我使用border radius在 CSS3 中创建圆角边框 它在 Safari FF 等上工作得很好 但是 当边框颜色是背景颜色时 您可以看到容器背景与边框重叠 你可以在这里尝试一下
  • 从右到左的语言和编程问题

    我正在创建一个网络文本编辑器 它使用我创建的新语言 如 BBcode 这种标记语言将采用阿拉伯语 但我面临这些问题 在所有 IDE 和编辑器中将英语和阿拉伯语文本混合在同一行中确实很困难 因为会发生奇怪的事情 单词和字符的顺序发生变化 使用
  • TypeError:React 中的循环对象值

    这是我的代码 sendMail e e preventDefault fetch https uczsieapp mailer herokuapp com var name document getElementById name var
  • Gecko/Firefox 对 HTML5 通知的支持

    我想知道是否有任何内置支持HTML5 通知到目前为止 Gecko 浏览器有哪些功能 也许有一些隐藏的开发人员 我知道 WebKitwindow webkitNotifications效果很好 那么 有 Firefox 实现吗 Update
  • 如何使用 PHP 解释 HTML5 输入日期值

    我需要让用户选择一个日期 最好采用 dd mm yy 格式 我决定尝试新的 HTML5 输入日期类型 但是我不知道如何解释它在服务器端给出的值 我得到的值是 yyyy mm dd 我怎样才能做到这一点 如果用户使用不支持它的旧版浏览器怎么办
  • Javascript onclick隐藏div

    我想使用 javascript 隐藏这个警告 div 我的 javascript 正确吗 我想在单击关闭图标时隐藏 关闭 div images close icon gif div strong Warning strong These a
  • 将纬度/经度转换为 X/Y,以便在美国地图图像上进行阿尔伯斯投影

    我正在尝试使用 C 或 Javascript 将纬度 经度转换为 X Y 坐标 以将带有 CSS 的 div 左 上 定位到美国地图的背景图像上 美国的标准地图投影是阿尔伯斯投影 如下所示 但 StackOverflow 仅提供参考基本墨卡
  • 用左div填充剩余空间

    谁能告诉我如何让左侧 div 填充剩余空间 而不固定右侧 div 大小 我想要与以下示例完全相反的内容 left float left border 1px solid blue right overflow hidden border 1
  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag
  • 使用 puppeteer 部署 firebase 功能时说即使我启用了 --no-sandbox 也找不到 chrome

    我正在尝试将 firebase 函数部署到使用 puppeteer 的 firebase 项目 我让它在本地计算机上运行 但是当它尝试在 firebase 上运行时 我收到此错误 Exception from a finished func
  • Dojo require,模块加载失败时连接错误

    当我尝试加载不存在的模块时 它失败并出现 404 错误 当然 我想处理此错误 但不知道如何连接到 错误 事件 根据 Dojo 文档 我应该能够使用它的微事件 API http livedocs dojotoolkit org loader
  • RegisterClientScriptCode 在部分回发后不起作用

    以下代码行位于 SharePoint 网站的用户控件中 ScriptManager RegisterClientScriptBlock this this GetType jquery144 false ScriptManager Regi
  • 问号字符显示在文本中。为什么是这样?

    我有一个备份服务器 可以自动备份我的实时站点 包括文件和数据库 在实时站点上 文本看起来不错 但是当您查看它的镜像版本时 它会显示 在某些文本中 该文本存储在新闻数据库表中 这是实时服务器和镜像服务器上的屏幕截图 将其备份到镜像服务器的过程
  • 根据对象内的值将对象数组分成两部分

    我一直在尝试 并努力 弄清楚如何根据键值对拆分对象数组 长话短说 我有一个火车正在停靠的车站列表 需要将之前的停靠点和未来的停靠点分开 我正在使用的数据如下所示 station code SOC station name Southend

随机推荐

  • 2023华为OD机试真题【计算快递业务主站点/回溯法/深度优先搜索】

    题目描述 快递覆盖的范围有N的站 如果A和B都可以用来中转 我们就称A B站可达 如果A B可达 B C可达 则A C达 我们现在有N个编号 如果s i j 1 表示i j可达 如果s i j 0 表示i j不可达 现用二维数组给定N个站点
  • 使用python爬取微信公众号文章

    一 背景 有时候看到某一个微信公众号中的文章 觉得写的非常不错 有种当时就想把该公众号所有的文章都看完的冲动 但是使用手机看不是特别方便 就想把文章全部下载下来到电脑上面看 二 爬虫实现步骤 使用python爬取微信公众号文章 总共分为如下
  • 图片加载防闪动的CSS方法

    图片闪动 在移动端设置图片布局时 图片使用自适应的方式 其父元素的高度是被图片高度撑开的 在图片加载前 父元素高度为0 加载后 父元素高度为图片高度 这样的过程会造成视觉上的闪烁 影响用户体验 因此 在用图片撑开父元素高度之前 就需要给父元
  • 安装sql server时提示缺少.NET 3.5 sp1

    这几天遇到了一个问题 在安装sql server的时候总是提示我没有安装 NET framework 3 5 sp1 但是我电脑上已经安装了它 多次尝试之后我百思不得其解 今天终于解决了 我的系统是win8升级上来的win10 在升级的时候
  • 一种横向业务的解决方案 -- AOP

    AOP Aspect Oriented Programming 即面向切片编程 所谓面向切片编程 就是可以按照时间 将程序分成无数个时间节点 利用AOP的思想 可以在任何一个时间节点插入其他的代码 来实现自己的业务需求 换句话说 对于那些非
  • java循环栅栏CyclicBarrier 使用详解

    1 CyclicBarrier 是什么 从字面上的意思可以知道 这个类的中文意思是 循环栅栏 大概的意思就是一个可循环利用的屏障 它的作用就是会让所有线程都等待完成后才会继续下一步行动 举个例子 就像生活中我们会约朋友们到某个餐厅一起吃饭
  • 单片机c语言屏蔽第四位,【单片机C语言基础入门】第四章:运算符与表达式

    大家好 今天和大家探讨的是单片机C语言中的运算符和表达式 前边介绍了C语言中的变量的表示 然而在计算的过程中只有变量是不能完成计算的 因此运算符和表达式为变量 包括常量 来做特定的操作 来实现数据的运算 因此运算符和表达式是C语言中不可或缺
  • 网卡多队列 (解决traceroute路由不能直达)以及高丢包问题

    多队列指实例规格支持的最大网卡队列数 单个ECS实例vCPU处理网络中断存在性能瓶颈时 您可以将实例中的网络中断分散给不同的CPU处理 经测试 在相同的网络PPS和网络带宽的条件下 与1个队列相比 2个队列最多可提升性能达50 到100 4
  • Keras-9 实现Seq2Seq

    A ten minute introduction to sequence to sequence learning in Keras 简单介绍如何用Keras实现Seq2Seq模型 原文链接 https blog keras io a t
  • SIMD简介

    SIMD简介 知乎本篇文章包含的内容有SIMD指令集简介以及简短的practice环节 1 SIMD的历史与分类SIMD Single Instruction Multiple Data 即单指令流多数据流 是一种采用一个控制器来控制多个处
  • 【EI检索】第五届信号处理与机器学习国际会议

    2022年第五届信号处理与机器学习国际会议 SPML 2022 及其分会2022年第四届人工智能技术国际会议 AITC 2022 将于2022年8月4 6日在中国大连召开 SPML AITC 2022目前已成功在上海 杭州 北京 线上召开过
  • c++实验总结_史上最全场景文字检测资源合集(70篇重要论文 + 15个开源代码 + 176个实验结果 + 1305个统计信息)...

    本文总结了2012年以来在场景文本检测领域的70篇代表性论文 21个常用数据集 15份开源代码 包含176个实验结果以及超过1300条统计信息 Github资源链接见文末 一 前言 许多自然场景中包含着丰富的文本信息 对于理解自然场景图像有
  • 2020 mse 清华_【清华大学】清华大学2020届推免生入围名单汇总

    我把能找到的清华入围名单 进入复试名单 都给大家发一下 做一个资料备份 尤其是有些系所的名单有本科学校 这可是非常珍贵的分析资料 首先给我的现在专业 招生简章 清华大学经济管理学院 http masters sem tsinghua edu
  • pop服务器未响应,servlet测试控制台无反应啊??求大神帮忙,

    String path request getContextPath String basePath request getScheme request getServerName request getServerPort path gt
  • 几种用户相似度计算方法及其优缺点

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 进行用户协同过滤时 一个关键问题是如何计算用户之间的相似性 比较常见的计算用户相似度的算法有余弦相似性 皮尔森系数 调整余弦相似性三种 这三种相似性都是基于一个称为用户 项
  • Dos常用命令及解释大全

    目录 前言 一 系统信息 二 网络 三 用户 四 端口进程服务 五 共享 六 文件操作 总结 前言 DOS是 磁盘操作系统 Disk Operating System 的缩写 它是一种早期的操作系统 最初在20世纪80年代广泛用于个人计算机
  • 完成U-net细胞分割的一些准备

    使用本地上传文件 from google colab import files uploaded files upload for fn in uploaded keys print User uploaded file name with
  • vue3中的Suspense组件

    用法 插槽名字固定 形成一个异步组件 比如这边 如果我们像之前那样进行静态引入的话 比如 child组件迟迟没有加载完毕 那么整个app vue组件也不会出现 而是要等到child加载完毕了之后再一起出现 而使用了defineAsyncCo
  • Python画图之浪漫樱花

    import turtle as T import random import time 画樱花的躯干 60 t def Tree branch t time sleep 0 0005 if branch gt 3 if 8 lt bran
  • 真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式!

    两行css如下 列间距 可有可无 默认30px column gap 0 效果图如下 说明 不存在一边列表过长问题 很均匀 没有缺点 2019年1月12日 我用的chrome 版本 70 0 3538 102 正式版本 64 位 以上代码没