自定义图片宫格(一句集成,简单,高效,自动识别数据源三种格式:UIImage,NSString,URL)

个人邮箱:892569921@qq.com 我的CSDN:http://blog.csdn.net/cry__boy 

QQ技术群:549943887

个人Github地址:https://github.com/cryboyofyu

项目地址:https://github.com/cryboyofyu/XYJGG

实现九宫格图片排列,一句代码集成,不懂得或者有问题的可以email 哦大笑

集成:cocopods

pod 'XYJGG'

1.使用方法:

XYJGGView * xyJGGView = [[XYJGGView alloc]initWithFrame:CGRectMake(XY_Padding, 0, XY_Width - XY_Padding*2, 100) withXYPhotosDataMArr:xyPhotosDataMArr withXYPlaceholderImg:[UIImage imageNamed:@"girl2.jpg"] withBgView:xyCell.contentView withXYItemViewTapBlock:^(UIView *xyItemView, NSMutableArray *xyPhotosDataMArr) {

//这里是点击图片的回调事件,返回了点击该图片的对象,和该图片所在的图片数据源数组
    NSLog(@"点击了第:%ld张图片,图片所在数据数组:%@",xyItemView.tag+1,xyPhotosDataMArr);
}];
2.调整图片大小
在 XYConstant.h 文件中分别定义了 一张图片,四张图片的,默认图片的样式,需要调整的时候直接改宏就好,如果需要更多样式,发邮件给我,小弟继续更新。
 

  欢迎大家提意见,一起交流学习,会根据大家的反馈及时更新。谢谢!   如果小弟的一点点薄力可以给大家带来便利,小弟三生有幸!会再接再厉!您的支持就是我的动力!   后续会添加 《自定义表情键盘》《类似微信朋友圈自定义图文混排》,感兴趣的要关注哦!


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用 layui 制作一个9宫格图片浏览页面的基本步骤: 1. 引入 layui 的样式和脚本文件 在 HTML 文件中引入 layui 的 CSS 样式文件和 JavaScript 脚本文件。 ```html <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css"> <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script> ``` 2. 创建 HTML 结构 在页面中创建一个 div 容器,用于显示图片列表。然后在容器中使用 layui 的 grid 组件创建一个九宫格布局,每个格子中放置一张图片。 ```html <div class="layui-container"> <div class="layui-row"> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/1.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/2.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/3.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/4.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/5.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/6.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/7.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/8.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/9.jpg"></div> </div> </div> ``` 3. 添加响应式布局 为了适应移动端设备,我们需要在容器的 class 属性中加入 `layui-col-space15` 和 `layui-col-xs12` 两个类,分别控制九宫格之间的间距和在移动端显示为一列。 ```html <div class="layui-container"> <div class="layui-row layui-col-space15 layui-col-xs12"> ... </div> </div> ``` 4. 添加图片预览功能 使用 layui 的 layer 组件可以为图片添加预览功能。在每个图片的 div 容器上添加一个 `layer-src` 属性,指定图片的预览地址。然后在页面底部添加一个 JavaScript 代码块,使用 layui 的 layer 组件初始化图片预览功能。 ```html <div class="layui-container"> <div class="layui-row layui-col-space15 layui-col-xs12"> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/1.jpg" layer-src="img/1.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/2.jpg" layer-src="img/2.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/3.jpg" layer-src="img/3.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/4.jpg" layer-src="img/4.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/5.jpg" layer-src="img/5.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/6.jpg" layer-src="img/6.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/7.jpg" layer-src="img/7.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/8.jpg" layer-src="img/8.jpg"></div> <div class="layui-col-xs4 layui-col-sm4 layui-col-md4"><img src="img/9.jpg" layer-src="img/9.jpg"></div> </div> </div> <script> layui.use('layer', function(){ var layer = layui.layer; layer.photos({ photos: '.layui-col-xs4' }); }); </script> ``` 以上就是使用 layui 制作一个9宫格图片浏览页面的基本步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值