美文网首页
瀑布流实现思路

瀑布流实现思路

作者: 蜂子fightting | 来源:发表于2016-07-28 15:36 被阅读119次

实现瀑布流,只需要重写 UICollectionViewLayout 类的3个方法:

  1. prepare 准备"当collectionView即将要显示的时候以及reloadData 之后都会来调用此方法做布局前的准备"准备itemSize 最小行间距..."
    - (void)prepareLayout {}

  2. 如果是自己来计算cell的frame之后一定要重写此方法返回collectionView的真实滚动范围

- (CGSize)collectionViewContentSize {    // 取出最高那一列的列号   
 NSInteger maxCol =[self maxHeightCol];    
return CGSizeMake(0, [self.eachColumnMaxHight[maxCol] floatValue] - self.minimumLineSpacing + self.footerReferenceSize.height);
}
  1. 通过输出此方法 数组中装的是一个一个的布局属性,一个布局属性对应一个cell
    1.布局属性中有cell的frame
    2.布局属性中还有cell的索引
    3.此方法是用来计算所有cell的frame及索引,而且每一个cell只计算一次,计算完成之后就不会再重复计算
    4.通过修改每一个cell对应的布局属性可以直接修改cell的frame,所以推理我们可以自己来计算每一个cell的frame最后把每一个cell对应的布局属性添加到数组中最终用此方法返回我们自己算好的frame应该可以实现瀑布流效果
// 在数组的最后还要计算footerView的frame 它的索引为0-0 
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
   NSArray *array = [super layoutAttributesForElementsInRect:rect];
    for (UICollectionViewLayoutAttributes *attr in array) {      
  attr.frame = CGRectMake(0, 0, 120, 130);    
}
    return array;
}
  - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {   
 return self.attrM;
}

瀑布流的规则:图片定宽而不定高;必须拿到图片的真实宽、高,以保证图片按正常比例显示,保证美观性。
每一行图片显示完之后,下一行图片显示的顺序是:从高度最矮的那一列开始显示;所以最好定义一个可变的数组来动态的保存每一列的高。
上拉刷新加载图片:
调用UIScrollerView的代理方法:屏幕正在滚动中都会调用此方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 如果footerView还没有出来以及正在加载中都不要再去重复加载更多
    if (self.footerView == nil || self.footerView.activity.isAnimating == YES) return;
 
    // 当footerView完全显示之后再加加载更多"而不是footerView一出来就去加载更多

    if (self.collectionView.contentOffset.y + self.collectionView.bounds.size.height > CGRectGetMaxY(self.footerView.frame) ) {
        // 正在加载时先让花花转起来
        [self.footerView.activity startAnimating];

        // 延迟去模拟网络加载
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            
            // 1.给模型数组中添加更多数据
            [self loadMoreData];
            
            // 2.让数据源方法重新执行
            [self.collectionView reloadData];
            
            // 3.让花花停止转
            [self.footerView.activity stopAnimating];
            // 4.把footerView属性设置为nil
            self.footerView = nil; 
        });
    }
    
}


相关文章

  • swift实现瀑布流

    类似瀑布流的使用场景很多. 实现瀑布流的关键节点: 实现cell的高度不同且没有规则的展示 这里整理实现瀑布流思路...

  • 瀑布流实现思路

    实现瀑布流,只需要重写 UICollectionViewLayout 类的3个方法: prepare 准备"当co...

  • 瀑布流的实现思路

    瀑布流,将相同宽度,高度不等的元素(大多时候是图片),整齐平整的呈现在用户眼前,因为每个元素的高度不同,如果使用浮...

  • 瀑布流实现的思路

    准备阶段: 为了方便查阅:源码和静态页面放在了最后面 以下内容均为js代码,静态页面不动 1.渲染第一行 2.其他...

  • iOS-CollectionView瀑布流框架搭建

    CollectionView实现以下效果. 思路:先说一下这个效果的实现思路,首先需要确定该瀑布流有多少列,然后需...

  • 瀑布流_懒加载_ajax结合使用

    整体的布局是瀑布流效果,然后滚动到底部进行懒加载。大体的实现思路: 获取数据 将数据变为DOM,然后通过瀑布流(绝...

  • 瀑布流的简单实现方法

    前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里。 效果演示 实现思路 collectionView...

  • iOS之简单瀑布流的实现

    前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里 效果演示 实现思路 collectionView能...

  • 瀑布流思路

    外边一个大框相对定位,里面的div绝对定位比如有三列,比较三列的高度,在最短的那一列排位,div的宽度都一样,高度...

  • 【iOS】瀑布流的实现

    1、效果演示 2、实现思路 根据瀑布流的列数,创建记录maxY的字典,例如两列的瀑布流,就创建两个Key去记录左右...

网友评论

      本文标题:瀑布流实现思路

      本文链接:https://www.haomeiwen.com/subject/rmuajttx.html