OrangeUI

瀑布流视图适用于每个列表项高度不同，却又要紧凑排列在一起的情况，
如淘宝、花瓣,如下图所示:
 
 
 
ListView.Properties.ViewType除了lvtIcon图标视图，lvtList列表视图，
还有lvtWaterfall瀑布流视图，
 
ListView在lvtIcon图标视图下，每个Item都是一个个水平排列的，
如果排列列表项时遇到宽度放不下了，那就会换一行，
并且换行时，Top取的是上一行最高的那个列表项的Bottom,
如下图所示:

 
ListView在lvtList列表模式下，ListView就是一个ListBox,
一行一个每个列表项，如下图所示:

而ListView在lvtWaterfall瀑布流模式下，
每个列表项排列的时候，都需要判断上方是否有空的地方可以插入，
如下图所示:

因此，只需要将ListView.Properties.ViewType设置为lvtWaterfall,
就可以实现瀑布流效果。
 
下面以朋友圈的瀑布流为示例，
先放一个ListView,
设置ListView.Properties.ViewType为vtWaterfall
ListView.Properties.ItemHeight设置为200,
ListView.Properties.ItemWidth设置为140,
ListView.Properties.ItemSpace设置为10,
ListView.Properties.ColCount设置为2,表示每行显示2个列表项，
双击ListView,添加好三个Item,
需要的数据如下图所示:

把大图放在Item.Icon,
头像放在Item.Pic,
标题(如大家辛苦了)放在Item.Caption,
用户名(如DelphiTeacher)放在Item.Detail,
图片分类(如郊游.风景)放在Item.Detail1，
每个列表项的高度需要设置成不一样，
比如第一个列表项的高度为200,
第二个列表项的高度为150,
第三个列表项的高度为180,
如下图所示:

 
 
再在上面放一个ItemDesignerPanel,
设置给ListView.Properties.ItemDesignerPanel,
在ItemDesignerPanel上放好Image,Panel和Label,
并做好绑定，如下图所示:

最后，效果如下图所示: