真的!!!两行css代码实现瀑布流;
Java引导者
共 1752字,需浏览 4分钟
· 2020-08-07
两行css如下:
/*列间距,可有可无,默认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代码大致如下:
class="waterfall-container">
class="waterfall-item" v-for="i in 100"> vue的语法,不会就粘贴20个div看效果
内容... 这里可以自己实现宽高不一样的div,看效果
之前还用flex实现了一个,有坑,一边太长,一边太短,请先大致了解flex,写过demo再往下看,效果图如下:
实现方式如下:
一行里面两列,可以控制每列数量相等,
每列里面各自循环,下面伪代码
但是有个坑,如果左边都很高,右边比较矮,就会出现右边空很多的内容, 在找解决办法
下面的
css:
.row{
display:flex;
flex-direction:row;
}
|
width=50%>
v-for='i fo 50'>
width=50%>
v-for='i fo 50'>
作者:coder94
https://segmentfault.com/a/1190000017866549
—————END—————
欢迎关注“Java引导者”,我们分享最有价值的Java的干货文章,助力您成为有思想的Java开发工程师!
扫描二维码
获取更多精彩
Java引导者
喜欢就点个"在看"呗^_^
评论
堪称最优秀的Docker可视化管理工具——Portainer你真的会用吗?
来源:blog.csdn.net/shark_chili3007/article/details/123366179👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目
小哈学Java
0
老爸嘲讽我了,写破代码一年就挣十几万,他在工地带50个工人,一个月光人头费就3万,让我滚回去跟他干!
点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接,进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群来自:网络,侵删有个网友的父亲是做工程的,天天就嘲笑他,说他天天写着破代码有啥用,一年就拿个十多万的死工资,然后告诉他自己在工地里面带了50个工人,一个月能抽三万
程序源代码
0
大厂都在用的 Git 代码管理规范 !
👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目正在酝酿中
小哈学Java
2
这五款牛逼的 IDEA 插件,堪称代码质量检查利器!
来源:blog.csdn.net/a745233700?type=blog一、Alibaba Java Coding Guidelines二、CheckStyle:三、PMD四、FindBugs:五、SonarLint:总结随着业务的发展,系统会越来越庞大,原本简单稳定的功能,可能在不断迭代后复杂度
码农突围
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
Java8 Steam流太难用了?那你可以试试 JDFrame
来源:juejin.cn/post/7356652717392740404👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
1
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2