首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

分享:纯 css 瀑布js 瀑布

博客地址:https://ainyi.com/60 分享一次纯 css 瀑布  和 js 瀑布 纯 css 写瀑布 1.multi-columns 方式: 通过 Multi-columns 相关的属性...也是根据屏幕大小自适应改变数。 看到这里,我们可以发现,使用纯 css 写瀑布,每一块 item 都是从上往下排列,不能做到从左往右排列: ?...这样子若是动态加载图片的瀑布,体验就会很不好 我们想要的是这样: ?...这样做只能通过 js 来写瀑布 js瀑布: html 结构与上面类似,这里我用图片来做示例: 1 2 <...瀑布实现方式: css 的绝对定位方式:根据每张图片的位置设置 top 和 left 值: 1 //瀑布效果 2 //这里有一个坑(已经修复): 3 //因为是动态加载远程图片,在未加载完全无法获取图片宽高

8.9K40

分享一次纯 css 瀑布js 瀑布

博客地址:https://ainyi.com/60 现在百度图片,360 图片搜索,都是以一种瀑布的形式展示,那么接下来,分享一波纯 css 瀑布js 瀑布 纯 css 写瀑布 multi-columns...-- more items --> .masonry 是瀑布容器,里面放置了列表 item,在 .masonry 中设置 column-count(数) 和 column-gap(间距...,每一块 item 都是从上往下排列,不能做到从左往右排列: [kc4aje4u6f.jpeg] 这样子若是动态加载图片的瀑布,体验就会很不好 我们想要的是这样: [no351tx20r.jpeg]...要实现如上,只能通过 js 来写瀑布 js瀑布 html 结构与上面类似,但这里我用图片来做示例 ...瀑布实现方式 css 的绝对定位方式:根据每张图片的位置设置 top 和 left 值 // 瀑布效果 // 这里有一个坑(已经修复): // 因为是动态加载远程图片,在未加载完全无法获取图片宽高

2.4K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    多栏布局与JS实现瀑布

    css3属性之多栏布局与JS实现瀑布    背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决...你可以使用这个工具,很方便的查看你的浏览器内核以及版本信息http://ie.icoa.cn/   2)Css3多属性:css3多主要是五个属性 column-count   column-gap    column-rule       column-width         column-span...设定的值,否则就会减少栏数来增加每栏宽度 css3多JS实现瀑布  给自己安利一波吧,看到网上很多瀑布的效果,哇,简直棒极了有没有;于是我迫不及待的打开V**,打开了pinterest的官网...自己也梳理梳理逻辑: 我们都不陌生瀑布是同宽的,但是高度不一,js主要的工作就是根据高度来进行布局, 1)当一行排满后,准备排第二行的时候,

    3K90

    分享 1个原生 JS 瀑布案例

    瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布探索之旅。...接着正文,假如如上图,每排有 5 ,那第 6 张图片应该出现前 5 张图片哪张的下面呢?当然是绝对定位到前 5 张图片高度最小的图片下方。 那第 7 张图片呢?...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布的基本布局...联想到业务场景中瀑布中下拉加载的图片一般都来自 Ajax 异步获取,那么加载的数据必然不能写死在库里,期望能实现如下调用(此处借鉴了 waterfall 的使用方式), const waterfall...waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 }) 观察调用方式,不难联想到使用发布/订阅模式来实现它,关于发布/订阅模式,之前在Node.js

    1.9K20

    原生 JS 实现一个瀑布插件

    瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内外网站都有一定规模的使用,比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布探索之旅。...接着正文,假如如上图,每排有 5 ,那第 6 张图片应该出现前 5 张图片哪张的下面呢?当然是绝对定位到前 5 张图片高度最小的图片下方。 那第 7 张图片呢?...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布的基本布局...联想到业务场景中瀑布中下拉加载的图片一般都来自 Ajax 异步获取,那么加载的数据必然不能写死在库里,期望能实现如下调用(此处借鉴了 waterfall 的使用方式), const waterfall...waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 }) 观察调用方式,不难联想到使用发布/订阅模式来实现它,关于发布/订阅模式,之前在 Node.js

    2.4K40

    iOS 瀑布封装

    [瀑布.gif] 功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布控件。...目前支持竖向瀑布(item等宽不等高、支持头脚视图)、水平瀑布(item等高不等宽 不支持头脚视图)、竖向瀑布( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法,含义注释的还算清晰: typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布 item等高不等宽 不支持头脚视图*/ WSLVHWaterFlow = 2, /...** 竖向瀑布 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局 待完成,敬请期待 */ } WSLFlowLayoutStyle;//样式 @class

    1.6K80

    表格头部固定和表格固定

    比如说表头固定,当网页滚动的时候,表头自动固定到网页顶部,这样很客观的展现了每的内容。...表头固定固定,需要用到jQuery DataTables(我不是前端大神,就懒一点,用下框架,偶尔用下框架,开发时间也节省了嘛,嘿嘿 ^_^),没错,又是我前面介绍的DataTables,我对这框架是情有独钟啊...表头固定固定是jQuery DataTables里的两个独立的扩展插件,下面我们就分别说说: 表头固定 1.下载并引入js和css样式扩展 dataTables.fixedHeader.min.js...true,//表格X轴滚动 scrollCollapse: true, fixedColumns: { leftColumns: 1,//表格左边固定数...rightColumns: 1//表格右边固定数 } } ); } ); 大功告成,是不是特别简单啊?

    3.4K20

    iOS 瀑布封装

    瀑布.gif 功能描述:WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布控件。...目前支持竖向瀑布(item等宽不等高、支持头脚视图)、水平瀑布(item等高不等宽 不支持头脚视图)、竖向瀑布( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法,含义注释的还算清晰: typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布 item等高不等宽 不支持头脚视图*/ WSLVHWaterFlow = 2, /...** 竖向瀑布 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局 待完成,敬请期待 */ } WSLFlowLayoutStyle;//样式 @class

    2K80

    图片瀑布,so easy!

    什么是图片瀑布 用一张花瓣网页的图片布局可以很清楚看出图片瀑布的样子: ?...简单来说,就是有很多图片平铺在页面上,每张图片的宽度相同,但是高度不同,这样错落有致的排列出 n 的样子很像瀑布,于是就有了瀑布图片一说。...实现原理 1、第一种方式 第一种方式前提是:图片的宽度固定,但是可变(根据屏幕大小) 通过上面的介绍,我们知道要实现瀑布的前提是宽度一致(假如为100px),高度可以不相同。...2、第二种方式 第二种方式前提是:固定的个数,然后图片根据屏幕的宽度进行自适应缩放。 这种方式由于图片是可以缩放的,宽高不好确定,因此不好用定位的方式处理。...我们可以这样处理,既然知道了,那么每一做一个容器。然后遍历图片,将图片放入容器高度最小的容器中即可。 这里我们使用js来添加图片,而不是事先写好在html中了。 实现代码 <!

    1.6K10
    领券