首页
学习
活动
专区
工具
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 //因为是动态加载远程图片,在未加载完全无法获取图片宽高...就可以设置每张图片瀑布中每块item的top值(每一行中最小的item高度,数组查找) 9 //item的left值:第一行:按照每块item的宽度值*块数 10 // 其他行

8.9K40

图片瀑布,so easy!

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

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

    分享一次纯 css 瀑布js 瀑布

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

    2.4K40

    多栏布局与JS实现瀑布

    css3属性之多栏布局与JS实现瀑布    背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决...实现瀑布  给自己安利一波吧,看到网上很多瀑布的效果,哇,简直棒极了有没有;于是我迫不及待的打开V**,打开了pinterest的官网。...自己也梳理梳理逻辑: 我们都不陌生瀑布是同宽的,但是高度不一,js主要的工作就是根据高度来进行布局, 1)当一行排满后,准备排第二行的时候,...把第一个图片放到上一行图片高度最小处,以此类推, 另外有一点就是自动加载,这里我做一个条件来判断是否加载, 2)当最后一个的元素距离网页顶部的高度(offsetTop)+ 这个元素高度的一半...梳理完逻辑,让我们动手写代码吧: html比较简单,这里图片我用了placehold的图片占位符,如果你没有很好的素材,这也许是个不错的选择 <div class="main

    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.../订阅模式来实现它,关于发布/订阅模式,之前在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.../订阅模式来实现它,关于发布/订阅模式,之前在 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

    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

    图片横向等高瀑布,每行占满,限制行数 的实现

    图片的横向瀑布,其实简单地按顺序排列就可以了 但要实现每行中各图片都等高(各行不一定等高,但每行里面等高),且每行都占满,就需要用到flex的特性了 控制每行图片高度都一致,可能会影响图片的比例,所以不能简单暴力地设置高度...,第一行仅可以放置四张图片,剩余100px的空间,那么各图片的flex-grow可以直接配置成图片的宽度width值,即可很方便精准地分配好这剩余的空间 第二行可以放五张图片,剩余N px的空间......容器宽度 == 图片宽度 所以  图片高度 == 图片宽度 * paddingTop % width值的计算可能比较绕 假设这里 width直接取 图片宽度w值,就会出现一行中图片高度不一致的情况 因为最终的图片高度即为容器的高度...图片宽度的不同,就直接导致了最终高度的不同 所以,为了确保图片高度一致,假设有三张图片 50*50  100*100  50*150  放在了同一行中,flex布局会将三张图片所在容器的高度自适应为最高的那个...$(window).resize(throttle(setLineLimit.bind(this, 3), 200)); 完整JS代码 1 // 事件绑定 2 function addEvent

    2K60

    vue实现网络图片瀑布 + 下拉刷新 + 上拉加载更多

    一、思路分析和效果图   用vue来实现一个瀑布效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果。...然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果; 选择哪种方式实现瀑布,这里选择绝对定位方式; 关键问题:由于每张图片的宽高不一样,而瀑布中要求所有图片的宽度一致,高度随宽度等比缩放...而且由于图片的加载是异步延迟。在不知道图片高度的情况下,每个图片所在的item盒子不好绝对定位。因此在渲染页面前先获取所有图片的高度,是解决问题的关键点!...这里选择用JS中的Image类,通过预加载图片的方式提前获取图片宽高,另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后,开始渲染页面。...,存储图片高度   获取数据后,遍历数据数组,预加载图片,计算图片缩放后的高度,存储起来。

    3.2K10
    领券