真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!...
作者:coder94
https://segmentfault.com/a/1190000017866549
两行css如下:
<style scoped> .waterfall-container { /*分几列*/column-count: 2;} .waterfall-item { /*不留白,不知道什么意思可以取消这个样式试试*/break-inside: avoid;}
</style>
/*列间距,可有可无,默认30px*/
/*column-gap: 0;*/
效果图如下:
说明:不存在一边列表过长问题,很均匀,没有缺点
抱歉:有坑!!! 但可以一链代码解决
这个列表显示顺序是 左边 123右边456,不符合正常展示逻辑;然后可以使用js对数据进行预处理;
大致逻辑如下:
const oldList = [1, 2, 3, 4, 5, 6, 7]// 使用reduce函数接受一个初始值{ 0: [], 1: [], length: 2 },
// 初始值包含两个空数组,和一个数组长度(Array.from方法要求将对象转数组时对象内要有这个属性)
// 在reduce函数内根据索引做余2判断,因为分两,余0的加入第一个数组,余1的加入第二个数组
// 最后reduce返回遍历完的对象 {0:[1,3,5,7],1:[2,4,6],length:2}
// 使用Array.from({0:[1,3,5,7],1:[2,4,6],length:2}) 得到 数组 [[1,3,5,7],[2,4,6]]
// 解构数组 使用concat合并,完事
const newList = [].concat(...(Array.from(oldList.reduce((total, cur, index) => {total[index % 2].push(cur) return total
}, { 0: [], 1: [], length: 2 }))))console.log(newList)
输出
[1, 3, 5, 7, 2, 4, 6]
这样处理一下就可以 让列表展示顺序变为 左边 1, 3, 5, 7 右边 2, 4, 6
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>
“在看和转发”就是最大的支持
真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!...相关推荐
- css代码应该放html哪里,css代码放到哪里?
CSS以HTML为基础,提供了丰富的功能,如字体.颜色.背景的控制及整体排版等.css代码需要放到哪里? 是不是一定写到html文件里面呢? 下面给大家介绍一下. css代码的定义通常有三种方式,内部 ...
- html链接外部css代码,html如何调用外部css?
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表.CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用.这样就可以实现多个页面风格的统一. ...
- 浏览器自定义css代码,根据浏览器不同设置CSS
[实例名称] 根据浏览器不同设置CSS [实例描述] 不同的浏览器在同样的CSS下显示效果可能不同,有时候为了保证界面的一致性,需要根据浏览器的不同设置相应的CSS. [实例代码] 标题页-学无忧(w ...
- css代码用词,巧用CSS解决中文断词换行的问题
中文词组有没有办法禁止它拆字换行? 控制英文单词是否断词换行,方法很多,在这里不做讨论. 中文字由于是由单个汉字组成,所以禁止拆分词组换行,实现起来就没那么容易.在这里就介绍一个实现禁止中文词组换行的 ...
- 百度新闻html css代码,仿百度首页XHTML+CSS代码
百度一下,就就知道了 /* *{margin:0px;padding:0px;font-size:14px;} 不要使用*,会影响整体的速度,只对需要重置的标签进行定义就可以了,还有当一个属性的数值为 ...
- html链接css代码link,link标签链接css放在哪?
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观.在HTML页面中可以使用link标签链接外部样式表. 在HTML中使用link ...
- 跨浏览器开发:CSS代码的金科玉律
作为Web设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容 ...
- css 设置表格右边有图片_20个web前端HTML5初学者实用CSS代码技巧
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边 ...
- 编写跨浏览器兼容的 CSS 代码的金科玉律
作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是 ...
- 20 个让你效率更高的 CSS 代码技巧
(给IT平头哥联盟加星标,提升前端技能) 作者:过冬 https://segmentfault.com/a/1190000019542534 在这里想与你分享一个由各大CSS网站总结推荐的20个有用的 ...
最新文章
- 火狐浏览器信息提取工具Dumpzilla
- 【深度学习】Focal Loss 与 GHM——解决样本不平衡问题
- 数据中心机房谐波治理
- jvm gc停顿_在JVM中记录世界停顿
- Linux的命令之 man -- 查看帮助文档
- 计算机程序备份,将应用程序快照备份到计算机
- 打桩时不修改源码_考研网上报名点了修改报名,修改后到报名点时,出现部分信息不符合参考条件,请修改或重新报名...
- Alibaba 应用诊断利器 Arthas 3.0.5 版本发布:提升全平台用户体验
- 常用的对象处理工具类
- javaweb课程设计在线学习论坛
- android移动应用技术教程课后答案,完整word版,《Android移动应用基础教程》_习题答案...
- 针式打印机打印显示传真服务器,针式打印机三联纸怎么设置 点击上面的工具栏上的打印服务...
- 1元课,学会小学数学应用题,你的孩子也能秒解“鸡兔同笼”
- 51单片机 独立按键k1控制数码管移位 k2控制数值加
- 智慧医院绩效管理方案
- 计算机软件实习每日学习打卡(3)20201204
- 网站导航 - 网址大全
- 黑魔法-伪类匹配列表数目实现微信群头像CSS布局的技巧
- 春晚郎朗宋祖英不合作 本山欲请张艺谋导演小品
- 【数论-Lucas定理】
热门文章
- 密码学 BugKu 这不是摩斯密码
- Raft 实现日志复制同步
- 计算机会计期末试题及答案,会计电算化模拟试题及答案
- 一个屌丝程序猿的人生(八十五)
- python2 + django 导出 excel 功能 接口示例代码(做记录)
- 如何快速把多个excel表合并成一个excel表(不熟悉vba及公式的人)
- 《网络游戏核心技术与实战》读书笔记
- linux系统python截图不显示中文_Linux系统通过python访问SQL SERVER,无法显示数据库内中文的问题...
- netCDF文件的scale_factor和add_offset
- shiro学习之错误 No realms have been configured! One or more realms must be present to execute an authori