确定需求
由上面的需求示意图可知模块的最小单位是正方形，边长是屏幕宽除去边距间隔后的四等份，而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2:1)、纵长方形(1:2)，动态的根据服务器下发模块样式绘制布局，可以横向滑动，限定为两行的高度。
注意：上面的示意宽高比是约等于，忽略了间距，计算的时候千万别忘了。
实现思路
由上需求分析可知，我们可以让后台每个模块下发width和height两个字段，字段的值是1或2就行了，然后我们就能根据宽高字段来确定模块的宽高了。现在宽高有了，我们怎么来绘制模块呢？
答案当然是用UICollectionView了，然后自定义流水布局UICollectionViewLayout，主要代码如下：计算记录每一个cell对应的布局属性。这个样式的栅格布局我已封装集成在WSLWaterFlowLayout 中，详情可以前往Github下载demo，也可以看之前的 iOS 瀑布流封装 这篇文章了解更多。
/** 返回indexPath位置cell对应的布局属性*/
- (CGRect)itemFrameOfHorizontalGridWaterFlow:(NSIndexPath *)indexPath{
//collectionView的高度
CGFloat collectionH = self.collectionView.frame.size.height;
//设置布局属性item的frame
CGFloat h = [self.delegate waterFlowLayout:self sizeForItemAtIndexPath:indexPath].height;
CGFloat w = [self.delegate waterFlowLayout:self sizeForItemAtIndexPath:indexPath].width;
CGFloat x = 0;
CGFloat y = 0;
//找出宽度最短的那一行
NSInteger destRow = 0;
CGFloat minRowWidth = [self.rowWidths[destRow] doubleValue];
for (NSInteger i = 1; i < self.rowWidths.count; i++) {
//取出第i行
CGFloat rowWidth = [self.rowWidths[i] doubleValue];
if (minRowWidth > rowWidth) {
minRowWidth = rowWidth;
destRow = i;
}
}
y = destRow == 0 ? self.edgeInsets.top : self.edgeInsets.top + h + self.rowMargin;
x = [self.rowWidths[destRow] doubleValue] == self.edgeInsets.left ? self.edgeInsets.left : [self.rowWidths[destRow] doubleValue] + self.columnMargin;
//更新最短那行的宽度
if (h >= collectionH - self.edgeInsets.bottom - self.edgeInsets.top) {
x = [self.rowWidths[destRow] doubleValue] == self.edgeInsets.left ? self.edgeInsets.left : self.maxRowWidth + self.columnMargin;
for (NSInteger i = 0; i < 2; i++) {
self.rowWidths[i] = @(x + w);
}
}else{
self.rowWidths[destRow] = @(x + w);
}
//记录最大宽度
if (self.maxRowWidth < x + w) {
self.maxRowWidth = x + w ;
}
return CGRectMake(x, y, w, h);
}
功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。
推荐阅读：
iOS 瀑布流封装
WKWebView的使用
UIScrollView视觉差动画
iOS 传感器集锦
iOS 封装原生二维码扫描和生成
iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果
UIActivityViewController系统原生分享-仿简书分享
iOS 自定义转场动画
iOS UITableView获取特定位置的cell
