博客地址：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 // 其他行
博客地址：https://ainyi.com/60 现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 multi-columns...-- more items --> .masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count（列数） 和 column-gap（列间距...，体验就会很不好 我们想要的是这样： [no351tx20r.jpeg] 要实现如上，只能通过 js 来写瀑布流 js 写瀑布流 html 结构与上面类似，但这里我用图片来做示例 <div class=...瀑布流实现方式 css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值 // 瀑布流效果 // 这里有一个坑（已经修复）： // 因为是动态加载远程图片，在未加载完全无法获取图片宽高...就可以设置每张图片在瀑布流中每块 item 的 top 值（每一行中最小的 item 高度，数组查找） // item 的 left 值：第一行：按照每块 item 的宽度值*块数 //
个人对瀑布流布局理解： 每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。...附上代码： 代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。 代码中写了详细注释，可以直接使用。 * { margin: 0;...获取一行最多可以展示几张图片 let nums = Math.floor(pageWidth / (itemWidth + gap)); // 瀑布流实现原则...(itemWidth + gap) * minItem["minIndex"] + "px"; // 关键步骤，更新 heightList 中对应位置下整列图片的高度
css3属性之多栏布局与JS实现瀑布流 背景：之前打算自己总结一下flex布局的知识点，发现自己无从下手，原因在何处：我反思了一下，其实原因很简单，使用的次数少，更多的时间使用了百分比，浮动和定位解决...有的时候甚至出现了这样的笔记： 我打算坚持写博客，不论自己总结有多么差劲，也要坚持写，哪怕几年后我看到以前的笔记，自己会偷偷笑出声。想想原来大一时的技术还是那样的稚嫩啊。...设定的值，否则就会减少栏数来增加每栏宽度 css3多列和JS实现瀑布流 给自己安利一波吧，看到网上很多瀑布流的效果，哇，简直棒极了有没有；于是我迫不及待的打开V**，打开了pinterest的官网...自己也梳理梳理逻辑： 我们都不陌生瀑布流是同宽的，但是高度不一，js主要的工作就是根据高度来进行布局， 1）当一行排满后，准备排第二行的时候，....box .pic img { display: block; width: 100%; } 梳理完了逻辑，该动手写js
瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。...pointer = this.getMinPointer(perList) } } 细心的朋友也许发现了代码中获取图片的高度用到了offsetHeight 这个属性，这个属性的高度之和等于图片高度...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布流的基本布局...联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取，那么加载的数据必然不能写死在库里，期望能实现如下调用(此处借鉴了 waterfall 的使用方式)， const waterfall...waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 }) 观察调用方式，不难联想到使用发布/订阅模式来实现它，关于发布/订阅模式，之前在Node.js
瀑布流Demo 瀑布流截图.gif 使用UICollectionView实现瀑布流 自定义UICollectionViewLayout中的主要代码： YJWaterFlowLayout.h中代码: #import...= 10; /** 每一行之间的间距*/ static const CGFloat YJDefaultRowMargin = 10; /** 边缘之间的间距*/ static const UIEdgeInsets...*columnHeights; /** 每一行之间的间距*/ -(CGFloat)rowMargin; /** 每一列之间的间距*/ -(CGFloat)columnMargin; /** 列数*/...-(NSInteger)columnCount; /** 边缘之间的间距*/ -(UIEdgeInsets)edgeInsets; /** 内容的高度*/ @property (nonatomic,...collectionViewContentSize { return CGSizeMake(0, self.maxColumnHeight + self.edgeInsets.bottom); } @end 瀑布流
Simulator Screen Shot - iPhone 8 - 2020-01-16 at 17.32.16.png 2、实现思路 根据瀑布流的列数，创建记录maxY的字典，例如两列的瀑布流，就创建两个...Key去记录左右两列当前最大的maxY // 初始化字典，有几列就有几个键值对，key为列，value为列的最大y值， // 初始值为上内边距 for (int i = 0; i < self.column...; i++) { self.maxYDic[@(i)] = @(self.sectionInset.top); } 根据设置的列数，列间隙，以及左右inset，确定itemWidth - (CGFloat...在左列，还是右列，确定itemY和itemX，从而确定item的frame /// 找出最短的一列 __block NSNumber *minIndex = @(0); [self.maxYDic...itemY = [self.maxYDic[minIndex] floatValue] + self.rowSpacing; } }else{ // 瀑布流多列情况
瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内外网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。...pointer = this.getMinPointer(perList) } } 细心的朋友也许发现了代码中获取图片的高度用到了 offsetHeight 这个属性，这个属性的高度之和等于图片高度...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布流的基本布局...联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取，那么加载的数据必然不能写死在库里，期望能实现如下调用(此处借鉴了 waterfall 的使用方式)， const waterfall...waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 }) 观察调用方式，不难联想到使用发布/订阅模式来实现它，关于发布/订阅模式，之前在 Node.js
[瀑布流.gif] 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...前言 ：近几个月一直在忙公司的ChinaDaily和国务院项目，没有抽出时间来写简书，现在终于算是告一段落了，抽出时间来更一篇 实现：主要是重写父类的几个涉及布局属性的方法，在对应的布局属性方法中根据需求自定义视图布局属性信息...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...、头脚视图的大小、行列数以及间距都可以在对应样式的代理方法中自定义，然后设置为UICollectionView的自动流水布局样式，并结合UICollectionView的用法使用，详情看示例 WSLWaterFlowLayout
瀑布流.gif 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...前言 ：近几个月一直在忙公司的ChinaDaily和国务院项目，没有抽出时间来写简书，现在终于算是告一段落了，抽出时间来更一篇 实现：主要是重写父类的几个涉及布局属性的方法，在对应的布局属性方法中根据需求自定义视图布局属性信息...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...、头脚视图的大小、行列数以及间距都可以在对应样式的代理方法中自定义，然后设置为UICollectionView的自动流水布局样式，并结合UICollectionView的用法使用，详情看示例 WSLWaterFlowLayout
谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js： jquery实例：Wookmark使用方法 引入核心文件 写入JS初始化 $('#tiles li').wookmark(); 参数 $('.myElements').wookmark({ align...fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。
TopProtocol protocol=new TopProtocol(); datas = protocol.load(0); return checkData(datas); } } 到目前为止实现的效果是这样的...if(useWidth<=width){ currentline.addChild(child);//这时候证明当前的孩子是可以放进当前的行里,放进去 useWidth+=horizontolSpacing...currentline=new Line(); // 创建新的一行 useWidth=0; } private class Line{ int height=0; //当前行的高度 int...(i); line.layout(l,t); //交给每一行去分配 t+=line.getHeight()+verticalSpacing; } } } 如果不要平均分配那些步骤，实现的效果是这样的...矩形 * startAngle 开始的角度 * sweepAngle 范围的角度 * useCenter 是否填充中间部分 * paint 画笔 */ //canvas.drawArc
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子： ?...简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。...实现原理 1、第一种方式 第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小） 通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。...我们首先确定排布的列数（假如为4列），那么第一行只能放4张图片，然后将每个图片的高度放入一个数组中（假如为 heightArr = [100,50, 200,30]），当我们在放入下一张图片的时候就要判断这个数组中哪个高度是最小的...然后遍历图片，将图片放入容器高度最小的容器中即可。 这里我们使用js来添加图片，而不是事先写好在html中了。 实现代码 <!
可能会在你的项目中用到这玩意，最近也是要用就简单的写了一个 Demo。...没多少代码，就不放Git了，下面会详细点的说说代码的，要还有什么问题的小伙伴可以直接Q我,也可以把Demo发给你，这里有Q可以找一下加我 多多交流，互相学习！ ...*) 这个方法中，UICollectionViewLayout 这里需要的参数看上去是 UICollectionViewLayout 类型的，其实你创建的时候是要用继承与它的 UICollectionViewFlowLayout...把高度控制在100 - 150 之间 CGFloat Hight = arc4random()% 150 + 100; /** * 瀑布流是两行还是三行甚至再多行...我注释掉的是两行的！！！
前言 刚用 jquery 实现了瀑布流效果。但是其实现方法，我并不满意，所以我还在思考，如何更加简单明了的实现瀑布流效果。...让我们抛开 jquery，忘掉各种高级方法，用最原始的方法去实现 瀑布流效果。...javascript版本的瀑布流 代码原理已经写在注释里了。不再重复 /* 瀑布流原生 javascript 实现方法 之前已经用 jquery 方法已经实现了瀑布流。...(_obj,"li"); // 瀑布流函数 function WaterFall(){ var _blank = 20, // 瀑布流间距...但是，在原生JS中，我用默认最小值为无穷大，var _minH = +Infinity 然后拿数组中的数字来和这个无穷大进行对比，如果这个数字比无穷大小，则将_minH赋值为当前数组的值，然后再拿下一个数组中的数字来进行对比
多个Listview瀑布流效果 效果展示 原理解释 自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。...重写MyLinearLayout中的onInterceptTouchEvent方法，返回true，打断向listview传递的触摸事件。...jamffy.example.waterfalllistview.MyLinearLayout> 自定义控件 /** * @author tmac 如果不做处理MyLinearLayout中的子...* 先中断所有子view的touch事件，然后根据触摸的位置，有父view把点击事件分发给相应的子view。...* 在分发之前需要给touch事件的对象event重新设置位置，因为子view的坐标系与父view是不同的。
坦白直率的言语，最容易打动悲哀的耳朵——莎士比亚 分享一个vue瀑布流组件 vue-waterfall git地址：https://github.com/MopTym/vue-waterfall.git
这一次的瀑布流，是真的瀑布流形式，上一版只是看起来像而已。 通过css的grid与js配合，就可以快速形成瀑布流的形式了。不过呢，有点小问题，就是间距（grid-gap），有点小偏差，但是整体不影响。...还有一点要注意的grid层最好不要有padding或box-sizing: border-box等 //css部分 .demo-list{ width: 100%; height: auto;...align-items: start; --vsb: hidden; } .demo-list-item{ width: 100%; visibility: var(--vsb); //这个属性的有一点的重要性...}, 1000) }) this.hooks.emit('compute-items-rect') } } //业务部分 //wxml //js...[ { img: 'http://www.agzgz.com/imgs/appstorecover-1.jpg', title: '带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的
的方法，我们用这个方法来对图片按照我们的想法进行压缩，具体公式在代码的注释块中。...dictionary]; //设置代理为主控制器，我们的瀑布流是继承于系统的流式布局，而流式布局又继承于collectioinviewlayout,它里面有collectionview...我们首先通过delegate获得了在主控制器中设置过的itemsize。...既然要实现实现瀑布流，就需要比较每一列的高度，然后把要插入的item插入到高度最小的那一列去。因此，我们需要比较每一列的高度，找出最小列。...设置好这一个item的frame之后，我们需要更新列高度数组中的数据，以便于下一次比较还是找出高度最小的列进行插入。
实现的栅格布局效果示意图 需求示意图 确定需求 由上面的需求示意图可知模块的最小单位是正方形，边长是屏幕宽除去边距间隔后的四等份，而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2...:1)、纵长方形(1:2)，动态的根据服务器下发模块样式绘制布局，可以横向滑动，限定为两行的高度。...这个样式的栅格布局我已封装集成在WSLWaterFlowLayout 中，详情可以前往下载。...return CGRectMake(x, y, w, h); } 后台下发字段格式示意图 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
