瀑布流布局columns

news2024/12/23 14:14:49

瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每个项目列表呈堆栈形式排列,最为关键的是,堆栈之间彼此之间没有多余的间距差存大。还是上张图来看看我们说的瀑布流布局是什么样子。

image

当初要实现这样的布局都是依赖于JavaScript来实现,所以当时出现过很多实现瀑布流布局的插件。比如Masonry、Isotope等都是非常有名的插件。但使用纯CSS来实现,当时还是非常困难的,不管是使用float还是inline-block布局都无法很好的控制列表项目堆栈之间的间距。最终得到的效果就像下面这样:

image

现在距离2012年已经过去了五个年头,CSS的技术更新也是日新月异,在这几年当中出现了很多新的布局方法,比如多列布局multi-columns、Flexbox布局以及今年浏览器支持有Grid布局。既然CSS的布局有这么多的变化,那么今天有没有不借助任何JavaScript(纯CSS方案)能否实现瀑布流布局?答案是肯定的,接下来的内容,我们就使用不同的CSS布局方案来实现瀑布流布局。

Multi-columns

首先最早尝试使用纯CSS方法解决瀑布流布局的是CSS3 的Multi-columns。其最早只是用来用来实现文本多列排列(类似报纸杂志样的文本排列)。但对于前端同学来说,他们都是非常具有创意和创新的,有人尝试通过Multi-columns相关的属性column-countcolumn-gap配合break-inside来实现瀑布流布局。

比如我们有一个类似这样的HTML结构:

<div class="masonry">
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <div class="item">
        <div class="item__content">
        </div>
    </div>
    <!-- more items -->
</div>

其中div.masonry是瀑布流的容器,其里面放置了n个列表div.item。为了节约篇幅,上面代码仅列了两个。结构有了,现在来看CSS。在.masonry中设置column-countcolumn-gap,前者用来设置列数,后者设置列间距:

.masonry {
    column-count: 5;
    column-gap: 0;
}

上面控制了列与列之间的效果,但这并不是最关键之处。当初纯CSS实现瀑布流布局中最关键的是堆栈之间的间距,而并非列与列之间的控制(说句实话,列与列之间的控制float之类的就能很好的实现)。找到实现痛楚,那就好办了。或许你会问有什么CSS方法可以解决这个。在CSS中有一个break-inside属性,这个属性也是实现瀑布流布局最关键的属性。

.item {
    break-inside: avoid;
    box-sizing: border-box;
    padding: 10px;
}

其中break-inside:avoid为了控制文本块分解成单独的列,以免项目列表的内容跨列,破坏整体的布局。当然为了布局具有响应式效果,可以借助媒体查询属性,在不同的条件下使用column-count设置不同的列,比如:

.masonry {
    column-count: 1; // one column on mobile
}
@media (min-width: 400px) {
    .masonry {
        column-count: 2; // two columns on larger phones
    }
}
@media (min-width: 1200px) {
    .masonry {
        column-count: 3; // three columns on...you get it
    }
}
<!-- etc. -->

比如下面的这个示例:

看到上面示例的效果,这个时候是不是有点成就感了,是不是觉得CSS更神奇了?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/825296.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sass的模块化,@import的编译时和运行时详解

sass如同css一样 可以模块化。 css中通过import来实现模块化&#xff0c; 但是两者有些不同&#xff0c;css是会参与到运行时的&#xff0c;也就是说运行的过程中有多个css文件&#xff0c;通过import指令导入进来。但是sass并不是个运行时态&#xff0c;sass是一个编译时态。…

六、JVM-垃圾收集器浅析

垃圾收集器浅析 主 JVM参数 3.1.1 标准参数 -version -help -server -cp3.1.2 -X参数 非标准参数&#xff0c;也就是在JDK各个版本中可能会变动 -Xint 解释执行 -Xcomp 第一次使用就编译成本地代码 -Xmixed 混合模式&#xff0c;JVM自己来决定3.1.3 -XX参数 使用得…

图片怎么压缩大小?值得一看的图片压缩方法

图片是我们生活和工作中必不可少的文件&#xff0c;为了能够有效保存、发送&#xff0c;我们需要适当压缩其大小&#xff0c;但很多朋友不知道怎么压缩图片&#xff0c;或者压缩后造成了图片清晰度受损&#xff0c;怎么才能既压缩图片的大小&#xff0c;又能避免清晰度受到影响…

为什么选择Docusaurus构建API文档?

在现代化软件开发中&#xff0c;文档对于软件成功的重要性不言而喻。然而&#xff0c;管理和维护文档站点往往会给开发者带来额外的负担。为了帮助开发人员快速构建易于管理和维护的文档站点&#xff0c;Docusaurus应运而生。本文将深入探讨为什么选择Docusaurus构建您的文档站…

Activiity跳转startActivity源码分析Activity启动流程(下)

调用ActivityThread子类ClientTranslationHandler的scheduleTranslation 注意上图有个sendMessage的 接着会执行translacationExecutor的execute方法。 都会走cycleToPath方法 cycleToPath方法对应的performLifecycleSequence 调用Actvitiy各个生命周期。 然后是第二种情况&am…

效率提升丨大学必看校园安全实用技巧

在当今社会&#xff0c;教育是培养人才、传承文明的重要场所。然而&#xff0c;教学楼作为学生、教师和员工活动的核心区域&#xff0c;也存在着潜在的安全隐患&#xff0c;其中最为突出的风险之一是火灾。火灾不仅危及生命财产&#xff0c;还可能给整个学校带来不可估量的损失…

五个BLOCK问题

block的原理是怎样的&#xff1f;本质是什么&#xff1f; 一个含有自动变量的匿名函数 Block 的本质是一个封装了函数及其调用环境的 Objective-C 对象 一个 block 实际是一个对象&#xff0c;它主要由一个 isa 和 一个 impl 和 一个 descriptor 组成。 是封装了函数代码以…

华为OD面试总结和建议:全程线上面试的经验分享

目录 导语一、准备工作&#xff1a;二、面试前&#xff1a;三、面试过程&#xff1a;1. 视频面试技巧&#xff1a;2. 技术问题准备&#xff1a; 四、面试后&#xff1a;结束语 导语 导语&#xff1a;随着技术的发展&#xff0c;线上面试在招聘过程中扮演着越来越重要的角色。作…

11万多英藏对照词典英藏翻译ACCESS\EXCEL数据库

今天继续发一个藏文藏语相关的翻译数据库&#xff0c;即英藏对照词典&#xff0c;加上《5万6千多藏文词典解释ACCESS数据库》以及昨天发的《近13万汉藏对照词典汉藏翻译ACCESS\EXCEL数据库》藏文类的数据就算较全了。 截图下方有显示“共有记录数”&#xff0c;截图包含了表的所…

js方法:toLocaleString()

js中的toLocaleString()方法用于将数字转换为本地化的字符串表示形式。 语法&#xff1a; number.toLocaleString([locales [, options]]) locales&#xff08;可选&#xff09;&#xff1a;一个字符串、字符串数组&#xff0c;表示要使用的语言或一组语言。例如&#xff0c;&…

拍立淘是如何实现的?

淘宝拍立淘功能是很多网购的网民经常会用到的一个功能。拍立淘的图片搜索商品列表接口功能是指用户可以通过上传一张商品图片&#xff0c;拍立淘会根据该图片进行识别和匹配&#xff0c;以找到与该图片相似或相同的商品&#xff0c;并将搜索到的商品列表返回给用户。以下是该接…

《深度探索c++对象模型》第五章笔记

非原创&#xff0c;在学习 5 构造、解构、拷贝语意学Semantics of Construction,Destruction, and Copy 考虑下面这个abstract base class声明: class Abstract_base { public:virtual ~Abstract_base() 0;virtual void interface() const 0;virtual const char*mumble() c…

Robot Framweork之UI自动化测试---分层设计

Robot Framework 的分层思想是一种测试设计和代码组织的模式&#xff0c;它将测试用例的实现和测试执行逻辑分离&#xff0c;以提高测试的可维护性、可读性和可扩展性。 一、分层思想 在实际项目中&#xff0c;一般分为三层&#xff1a;元素层&#xff0c;流程层&#xff0c;用…

异步消息传递技术 JMS AMQP MQTT

广泛使用的三种异步消息传递技术&#xff1a;JMS AMQP MQTT JMS AMQP MQTT JMS&#xff08;Java Message Service)&#xff1a;一个类似JDBC的规范&#xff0c;提供了与消息服务相关的API接口 JMS消息模型&#xff1a; P2P 点对点模型&#xff1a;消息发到一个队…

BES 平台 SDK之按键的配置

本文章是基于BES2700 芯片&#xff0c;其他BESxxx 芯片可做参考&#xff0c;如有不当之处&#xff0c;欢迎评论区留言指出。仅供参考学习用&#xff01; BES 平台 SDK之LED的配置_谢文浩的博客-CSDN博客 关于系统LED简介可参考上一篇文章。链接如上所示&#xff01; 一&…

【ONE·Linux || 基础IO(一)】

总言 文件输入与输出相关介绍&#xff1a;语言层面/系统层面文件调用接口举例、文件描述符、重定向说明、缓冲区理解。 文章目录 总言1、文件输入与输出1.1、预备知识1.2、语言层面&#xff1a;回归C语言中文件相关接口1.2.1、打开文件和关闭文件&#xff1a;对当前路径的理解…

企业服务器中了Locked勒索病毒后怎么办,如何解决问题并提高防范意识

科学技术的发展给我们的生活带来了极大便利&#xff0c;但也为企业带来了安全威胁。近期&#xff0c;我们收到很多企业的求助&#xff0c;企业的服务器中了locked后缀勒索病毒&#xff0c;计算机上的所有文件都被加密&#xff0c;无法被正常调取&#xff0c;严重影响了企业的正…

使用预训练 ViT 模型的图像字幕中的视觉变换器 (ViT)-附源码

介绍 使用预训练 ViT 模型的图像字幕可以被视为图像下方的文本或书面描述,旨在提供图像细节的描述。它将图像翻译成文本描述的任务。它是通过连接视觉(图像)和语言(文本)来完成的。在本文中,我们使用图像中的 Vision Transformers (ViT) 作为使用 PyTorch 后端的主要技术…

2023牛客暑假多校-5-I-The Yakumo Family

解法&#xff1a;考虑枚举这个区间&#xff0c;设这个区间异或和为w。对于左端点 &#xff0c;预处理出其左侧的所有子区间异或和的和 ,表示区间上所有子区间异或和。对右侧也做同样操作预处理出&#xff0c;表示区间上所有子区间异或和。那么最后答案就是。最重要的就是如何求…

Linux下 Docker容器引擎基础(2)

目录 创建私有仓库 将修改过的nginx镜像做标记封装&#xff0c;准备上传到私有仓库 将镜像上传到私有仓库 从私有仓库中下载镜像到本地 CPU使用率 CPU共享比例 CPU周期限制 CPU 配额控制参数的混合案例 内存限制 Block IO 的限制 限制bps 和iops 创建私有仓库 仓库&a…