首页
学习
活动
专区
工具
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 //因为是动态加载远程图片,在未加载完全无法获取图片宽高...这实现了横向排列的瀑布效果 欢迎浏览 GitHub:https://github.com/Krryxa 博客地址:https://ainyi.com/60

8.7K40

分享一次纯 css 瀑布js 瀑布

博客地址:https://ainyi.com/60 现在百度图片,360 图片搜索,都是以一种瀑布的形式展示,那么接下来,分享一波纯 css 瀑布js 瀑布 纯 css 写瀑布 multi-columns...-- more items --> .masonry 是瀑布容器,里面放置了列表 item,在 .masonry 中设置 column-count(列数) 和 column-gap(列间距...要实现如上,只能通过 js 来写瀑布 js瀑布 html 结构与上面类似,但这里我用图片来做示例 ...瀑布实现方式 css 的绝对定位方式:根据每张图片的位置设置 top 和 left 值 // 瀑布效果 // 这里有一个坑(已经修复): // 因为是动态加载远程图片,在未加载完全无法获取图片宽高...第一行:按照每块 item 的宽度值*块数 // 其他行:与自身上面一块的 left 值相等 function waterFall () { // 1- 确定图片的宽度 - 滚动条宽度

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

多栏布局与JS实现瀑布

css3属性之多栏布局与JS实现瀑布    背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决...column-width宽度时,同时设置盒子的width,否则宽度默认为100%,每栏宽度按栏数平均分;盒子每栏宽度必须大于等于column-width设定的值,否则就会减少栏数来增加每栏宽度 css3多列和JS...实现瀑布  给自己安利一波吧,看到网上很多瀑布的效果,哇,简直棒极了有没有;于是我迫不及待的打开V**,打开了pinterest的官网。...自己也梳理梳理逻辑: 我们都不陌生瀑布是同宽的,但是高度不一,js主要的工作就是根据高度来进行布局, 1)当一行排满后,准备排第二行的时候,....box .pic img { display: block; width: 100%; } 梳理完了逻辑,该动手写js

2.9K90

分享 1个原生 JS 瀑布案例

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

1.8K20

原生 JS 实现一个瀑布插件

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

2.3K40

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.5K80

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.9K80
领券