瀑布流的实现

简介: 瀑布流的实现

简介:瀑布流的实现前提是后台给返回图片的高度和宽度


效果图


image.png

1.先给大家讲讲怎么使用这个封装


  • 1.瀑布流主要是layout的布局
    你可以把类CWWaterViewLayout.h拖走,里面有几个属性

/**
   *  collectionView上下左右之间的间距
   */
  @property(nonatomic,assign) UIEdgeInsets sectionInset;
  /**
   *  每一列之间的间距
   */
  @property(nonatomic,assign) CGFloat columnMargin1;
  /**
   *  每一行之间的间距
   */
  @property(nonatomic,assign) CGFloat rowMargin1;
  /**
   *  告诉外界你想显示多少列
   */
  @property(nonatomic,assign) int columnsCount;

默认情况下全是10


  • 2.cell的布局自己设计了
  • 3.传比例(这个方法需要实现)


#pragma mark - <CWWaterViewLayoutDelegate>的代理方法
-(CGFloat)waterflowLayout:(CWWaterViewLayout *)waterViewLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath
{
   ShopModel *shopmodel = self.tempArray[indexPath.item];
   /**
    *  取出来宽高
    */
  NSString *shopH = [NSString stringWithFormat:@"%@",shopmodel.H];
  NSString *shopW = [NSString stringWithFormat:@"%@",shopmodel.W];
  /**
    *  转化为float类型
    */
  CGFloat shopHValue = [shopH floatValue];
  CGFloat shopWValue = [shopW floatValue];
  /**
   *  返回比例计算的高度
   */
  return shopHValue / shopWValue * width;
}

2.重要的是CWWaterViewLayout.m里面的布局计算才是瀑布流的核心代码


#pragma mark5.  尺寸的计算
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
/**
 *  假设最短的那一列是第0列
 */
__block NSString *minYColun = @"0";
[self.maxYdict enumerateKeysAndObjectsUsingBlock:^(NSString *column,NSNumber *maxY, BOOL * _Nonnull stop) {
    if ([maxY floatValue] < [self.maxYdict[minYColun] floatValue] ) {
        minYColun = column;
    }
}];
/**
 *  计算宽度
 */
CGFloat width =  (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin1)/self.columnsCount;
/**
 *  高度
 */
CGFloat height = [self.delegate waterflowLayout:self heightForWidth:width atIndexPath:indexPath];
/**
 *  计算x和y
 */
CGFloat x = self.sectionInset.left + (width + self.columnMargin1) * [minYColun floatValue];
CGFloat y = [self.maxYdict[minYColun]floatValue] + self.rowMargin1;
/**
 *  更新这一列的最大Y值
 */
  self.maxYdict[minYColun] = @(y + height);
  UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
  attrs.frame = CGRectMake(x, y, width, height);
  return attrs;
}


后记:具体的您看代码,我都进行了注释


王冲的瀑布流  密码: 4seg


目录
相关文章
|
1月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
前端必看的8个HTML+CSS技巧 (八)瀑布流布局
|
1月前
|
JavaScript
uniapp实现瀑布流
uniapp实现瀑布流
|
2天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
1天前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
|
1月前
uniapp实现瀑布流?
uniapp实现瀑布流?
|
JavaScript
jquery插件-瀑布流-52
jquery插件-瀑布流-52
80 0
jquery插件-瀑布流-52
|
搜索推荐 UED
使用 fluro 的转场动画提高页面切换体验
fluro 提供了滑入、渐现、全屏对话框、原生等多种转场动画形式,同时还支持自定义转场动画。借助转场动画可以提高用户体验。
242 0
使用 fluro 的转场动画提高页面切换体验
|
前端开发 JavaScript
SVG + 动画 实现一个有个性的404页面
我正在参加 码上掘金体验活动,详情:[show出你的创意代码块],我们的博客网站有时候 404页面比较普通,我们可以通过SVG 加动画来实现一个有个性的页面。
172 0
|
Android开发
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片预览和图片切换
Android图片选择器,仿微信的图片选择器的样式和效果。支持图片的单选、限数量的多选和不限数量的多选。支持图片预览和图片文件夹的切换。支持图片单选并剪裁。 先上效果图: 1、引入依赖 在Project的build.gradle在添加以下代码 allprojects { repositories { ... maven { url 'https://jitpack.io' } // 如果你使用的是1.4.0或更早的版本,这句可以不用。
6009 0