博客地址：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 // 其他行
什么是图片瀑布流 用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子： ?...简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。...实现原理 1、第一种方式 第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小） 通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。.../jquery.min.js"> $(function () { // 获取图片的宽度(200px) let imgWidth...然后遍历图片，将图片放入容器高度最小的容器中即可。 这里我们使用js来添加图片，而不是事先写好在html中了。 实现代码 <!
博客地址：https://ainyi.com/60 现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 multi-columns...： [0ledbff8sh.jpeg] 问题来了 看到这里，我们可以发现，使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列： [kc4aje4u6f.jpeg] 这样子若是动态加载图片的瀑布流...，体验就会很不好 我们想要的是这样： [no351tx20r.jpeg] 要实现如上，只能通过 js 来写瀑布流 js 写瀑布流 html 结构与上面类似，但这里我用图片来做示例 <div class=...瀑布流实现方式 css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值 // 瀑布流效果 // 这里有一个坑（已经修复）： // 因为是动态加载远程图片，在未加载完全无法获取图片宽高...就可以设置每张图片在瀑布流中每块 item 的 top 值（每一行中最小的 item 高度，数组查找） // item 的 left 值：第一行：按照每块 item 的宽度值*块数 //
个人对瀑布流布局理解： 每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。...附上代码： 代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。 代码中写了详细注释，可以直接使用。 <!...(pageWidth / (itemWidth + gap)); // 瀑布流实现原则： // 所有图片元素绝对定位，从第二行开始，依次从第一行图片元素高度最小的下方填充...，这里注意，不是从左至右填充，即优先填补空位，填补一个后，再填补下一个较大的空位 // 定义第一行图片的所有高度的数组，之后每张图片下方填充图片后，会更新数组对应位置下的最小高度...需要统一设置 left 值,top值如果加gap，则还需设置gap值 if (i < nums) { // 将第一行的图片元素的高度放入
css3属性之多栏布局与JS实现瀑布流 背景：之前打算自己总结一下flex布局的知识点，发现自己无从下手，原因在何处：我反思了一下，其实原因很简单，使用的次数少，更多的时间使用了百分比，浮动和定位解决...设定的值，否则就会减少栏数来增加每栏宽度 css3多列和JS实现瀑布流 给自己安利一波吧，看到网上很多瀑布流的效果，哇，简直棒极了有没有；于是我迫不及待的打开V**，打开了pinterest的官网...自己也梳理梳理逻辑： 我们都不陌生瀑布流是同宽的，但是高度不一，js主要的工作就是根据高度来进行布局， 1）当一行排满后，准备排第二行的时候，...把第一个图片放到上一行图片高度最小处，以此类推， 另外有一点就是自动加载，这里我做一个条件来判断是否加载， 2）当最后一个的元素距离网页顶部的高度（offsetTop）+ 这个元素高度的一半...梳理完逻辑，让我们动手写代码吧： html比较简单，这里图片我用了placehold的图片占位符，如果你没有很好的素材，这也许是个不错的选择 <div class="main
瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。...当然是绝对定位到前 5 张图片高度最小的图片下方。 那第 7 张图片呢？这时候把第 6 张图片和在它上面的图片当作是一个整体后，思路和上述是一致的。...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布流的基本布局...联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取，那么加载的数据必然不能写死在库里，期望能实现如下调用(此处借鉴了 waterfall 的使用方式)， const waterfall.../订阅模式来实现它，关于发布/订阅模式，之前在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 瀑布流
. // import UIKit /// 瀑布流代理 @objc protocol WaterfallLayoutDataSource : class { /// 指定ITEM的高度...func waterfallLayout(_ layout : WaterfallLayout, indexPath : IndexPath) -> CGFloat /// 瀑布流一共有多少列...WaterfallLayout) -> Int } class WaterfallLayout: UICollectionViewFlowLayout { // MARK: 对外提供属性 // 瀑布流数据源代理...//将当前列的高度在加载当前ITEM的高度 colH = colH + height + minimumLineSpacing...//重新设置当前列的高度 colHeights[i % cols] = colH // 5.设置item的属性
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{ // 瀑布流多列情况
图片的横向瀑布流，其实简单地按顺序排列就可以了 但要实现每行中各图片都等高（各行不一定等高，但每行里面等高），且每行都占满，就需要用到flex的特性了 控制每行图片高度都一致，可能会影响图片的比例，所以不能简单暴力地设置高度...，或者手动定义 使用flex-grow可以分配按比例分配主轴的剩余空间 如果有10张图片需要放置，第一行仅可以放置四张图片，剩余100px的空间，那么各图片的flex-grow可以直接配置成图片的宽度width...假设这里 width直接取 图片宽度w值，就会出现一行中图片高度不一致的情况 因为最终的图片高度即为容器的高度，而容器的高度是由容器宽度决定的（注意这里的paddingTop值已经确定），而容器宽度就是由这里的...图片宽度的不同，就直接导致了最终高度的不同 所以，为了确保图片高度一致，假设有三张图片 50*50 100*100 50*150 放在了同一行中，flex布局会将三张图片所在容器的高度自适应为最高的那个...(this, 3), 200)); 完整JS代码 1 // 事件绑定 2 function addEvent(elem, type, handler) { 3 elem.addEventListener
瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内外网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。...当然是绝对定位到前 5 张图片高度最小的图片下方。 那第 7 张图片呢？这时候把第 6 张图片和在它上面的图片当作是一个整体后，思路和上述是一致的。...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布流的基本布局...联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取，那么加载的数据必然不能写死在库里，期望能实现如下调用(此处借鉴了 waterfall 的使用方式)， const waterfall.../订阅模式来实现它，关于发布/订阅模式，之前在 Node.js 异步异闻录 有介绍它。
此作品是一款非常实用的jquery特效，结合了两个jquery插件jquery瀑布流插件blocksit和图片延迟加载插件jquery.lazyload，网站上分享过很多款瀑布流作品，可是很多网友们都觉得不是很懂...实现功能的jquery代码如下： $(function(){ $("img.lazy").lazyload({ load:function(){
[瀑布流.gif] 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽 不支持头脚视图*/ WSLVHWaterFlow = 2, /...** 竖向瀑布流 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局 待完成，敬请期待 */ } WSLFlowLayoutStyle;//样式 @class
瀑布流.gif 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽 不支持头脚视图*/ WSLVHWaterFlow = 2, /...** 竖向瀑布流 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局 待完成，敬请期待 */ } WSLFlowLayoutStyle;//样式 @class
谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js： jquery实例：Wookmark使用方法 引入核心文件 写入JS初始化 $('#tiles li').wookmark(); 参数 $('.myElements').wookmark({ align...– "left", "right", 和"center" autoResize – 如果为 "true", 浏览器改变大小后更新图层 resizeDelay – 默认 "50"毫秒, 浏览器改变大小与图片更新间的间隔时长...fillEmptySpace – 如果为 "true",在每一列的底部会用一个空白的item填满对齐。
StateListDrawable(); stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, pressedDrawable);// 按下显示的图片...stateListDrawable.addState(new int[]{}, normalDrawable);// 抬起显示的图片 return stateListDrawable; } TopFragment...int backColor = 0xffcecece; Drawable pressedDrawable=DrawableUtils.createShape(backColor);// 按下显示的图片..., green, blue);//范围 0-255 GradientDrawable createShape = DrawableUtils.createShape(color); // 默认显示的图片...currentline=new Line(); // 创建新的一行 useWidth=0; } private class Line{ int height=0; //当前行的高度 int
可能会在你的项目中用到这玩意，最近也是要用就简单的写了一个 Demo。...没多少代码，就不放Git了，下面会详细点的说说代码的，要还有什么问题的小伙伴可以直接Q我,也可以把Demo发给你，这里有Q可以找一下加我 多多交流，互相学习！ ...对象去初始化的，这也就解释了我们的zxFlowLayout 是继承与 UICollectionViewFlowLayout 的！！...把高度控制在100 - 150 之间 CGFloat Hight = arc4random()% 150 + 100; /** * 瀑布流是两行还是三行甚至再多行...我注释掉的是两行的！！！
前言 刚用 jquery 实现了瀑布流效果。但是其实现方法，我并不满意，所以我还在思考，如何更加简单明了的实现瀑布流效果。...让我们抛开 jquery，忘掉各种高级方法，用最原始的方法去实现 瀑布流效果。...javascript版本的瀑布流 代码原理已经写在注释里了。不再重复 /* 瀑布流原生 javascript 实现方法 之前已经用 jquery 方法已经实现了瀑布流。...于是，我真的实现了 *^0^* -------------- 无论是 jquery 还是原生 js for 循环都是一个非常重要的用法 只要打开脑洞，就会有更加异想天开的解决方法...(_obj,"li"); // 瀑布流函数 function WaterFall(){ var _blank = 20, // 瀑布流间距
多个Listview瀑布流效果 效果展示 原理解释 自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。...重写MyLinearLayout中的onInterceptTouchEvent方法，返回true，打断向listview传递的触摸事件。...* 先中断所有子view的touch事件，然后根据触摸的位置，有父view把点击事件分发给相应的子view。...* 在分发之前需要给touch事件的对象event重新设置位置，因为子view的坐标系与父view是不同的。...// 在分发之前需要给touch事件的对象event重新设置位置，因为子view的坐标系与父view是不同的。
一、思路分析和效果图 用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。...然后针对这几个效果的实现，捋下思路： 根据加载数据的顺序，依次追加标签展示效果； 选择哪种方式实现瀑布流，这里选择绝对定位方式； 关键问题：由于每张图片的宽高不一样，而瀑布流中要求所有图片的宽度一致，高度随宽度等比缩放...而且由于图片的加载是异步延迟。在不知道图片高度的情况下，每个图片所在的item盒子不好绝对定位。因此在渲染页面前先获取所有图片的高度，是解决问题的关键点！...这里选择用JS中的Image类，通过预加载图片的方式提前获取图片宽高，另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后，开始渲染页面。...，存储图片高度 获取数据后，遍历数据数组，预加载图片，计算图片缩放后的高度，存储起来。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
