手把手教你写移动端瀑布流控件布局篇

1.了解每个平台的基础的布局控件：

Android：FrameLayout,LinearLayout,AbsoluteLayout(已废弃) （http://developer.android.com/guide/topics/ui/declaring-layout.html）以及强大的ViewGroup。

Windows Phone：Grid,StackPanel,Canvas （http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/jj207042(v=vs.105).aspx）

iOS：强大的UIView给开发者自己够构造布局的空间。

2.思路设计图

3.思路剖析

这里先给两个图起个名字：第一个叫LinearLayout,第二个叫CanvasLayout 。这是现在比较流行的布局方式，Android有些人的博客写是采用第一中方式写的。我不做评判，先简单介绍下。

LinearLayout 是按照列数来构造列数个垂直排列的容器控件,然后当数据来的时候，先拿到高度最低的列，根据计算好的列宽，把图片等比例缩放，然后把数据插入到相应的列中，维护多个容器。

CanvasLayout是按照列数和控件的宽度，计算出每列的宽度，然后根据计算好的列宽，对图片进行等比例缩放得到每个Item的宽高，然后计算Item的坐标，有了Point和Size就可以放入布局中。维护坐标系统。

我个人更倾向于第二种方式。（其实我也没试过第一种，有兴趣者可以跟帖讨论）

猜测原因：

LinearLayout要维护多个Container对象，在后面会提到的deleteItem，SelectItem或者在ItemAnimation时，都要找相应的Item进行位置变化或者UI 重新渲染等,而这些又是对相应的Container进行的，这样就要不断维持和判断Item和Container的关系，项目久了之后可能就出现混乱和难以维护的情况。

CanvasLayout维护的就是一个值类型或者一个结构体，相应的操作也是在一个容器中进行的，再加上有自己的坐标系统，操作起来也比较方便。

4.代码部分

好了，说了这么多，看看具体代码是怎么来写吧。

iOS:

UIPinterestView.h

#import <UIKit/UIKit.h>

@class UIPinterestViewCell;
@class UIPinterestView;
@protocol UIPinterestViewDataSource;

@protocol UIPinterestViewDelegate <NSObject,UIScrollViewDelegate>

@required
- (CGFloat)pinterestView:(UIPinterestView *)pinterestView heightForItemAtIndex:(NSUInteger)index;
@optional
- (void)pinterestView:(UIPinterestView *)pinterestView didSelectItemAtIndex:(NSUInteger)index;

@end

@interface UIPinterestView : UIScrollView
{
    NSMutableArray *_columnHeightRecoder;
    NSUInteger _oldItemsCount;
    BOOL _needLayout;
}

@property(nonatomic,assign) id<UIPinterestViewDelegate> delegate;
@property(nonatomic,assign) id<UIPinterestViewDataSource> dataSource;
@property(nonatomic,assign) CGFloat itemWidth;

- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier;
- (void)reloadData;

@end

@protocol UIPinterestViewDataSource <NSObject>

@required
- (NSUInteger)numberOfItemsInGridView:(UIPinterestView *)pinterestView;
- (NSUInteger)columnsNumPerRow:(UIPinterestView *)pinterestView;
- (CGFloat)marginPerCell:(UIPinterestView *)pinterestView;
- (UIPinterestViewCell *)pinterestView:(UIPinterestView *)pinterestView cellForItemAtIndex:(NSUInteger)index;

@end

UIPinterestView.m

#import "UIPinterestView.h"
#import "UIPinterestViewCell.h"
#import "UIView+UITappedBlocks.h"

@implementation UIPinterestView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self shareInit];
    }
    return self;
}

- (void)dealloc
{
    if (_columnHeightRecoder != nil) {
        [_columnHeightRecoder release];
        _columnHeightRecoder = nil;
    }
    [super dealloc];
}

- (void)shareInit
{
    if(_columnHeightRecoder == nil) {
        _columnHeightRecoder = [[NSMutableArray alloc] init];
    } else {
        [_columnHeightRecoder release];
        _columnHeightRecoder = nil;
        [self shareInit];
    }
    _oldItemsCount = 0;
    _needLayout = YES;
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    if(!_needLayout) {
        return;
    }
    [self layoutCells];
    _needLayout = NO;
}

- (void)layoutCells
{
    NSUInteger itemCount = [self.dataSource numberOfItemsInGridView:self];
    NSUInteger columnCount = [self columnCount];
    CGFloat columnMargin = [self columnMargin];
    self.itemWidth = (self.frame.size.width - (columnCount + 1) * columnMargin) / columnCount;
    
    for (int i = _oldItemsCount; i < itemCount; i++) {
        
        UIPinterestViewCell *cell = [self.dataSource pinterestView:self cellForItemAtIndex:i];
        [cell whenTapped:^{
            if([self.delegate respondsToSelector:@selector(pinterestView:didSelectItemAtIndex:)]) {
                [self.delegate pinterestView:self didSelectItemAtIndex:i];
            }
        }];
        CGFloat itemHeight = [self.delegate pinterestView:self heightForItemAtIndex:i];
        int minYColumnNum = [self getMinHeightColumnNum:columnCount];//获取最小列的列号
        CGFloat minYHeight = [[_columnHeightRecoder objectAtIndex:minYColumnNum] floatValue];
        CGFloat x = minYColumnNum * (self.itemWidth + columnMargin) + columnMargin;
        CGFloat y = minYHeight + columnMargin;
        cell.frame = CGRectMake(x, y, self.itemWidth, itemHeight);
        [self addSubview:cell];
        _columnHeightRecoder[minYColumnNum] = [NSNumber numberWithFloat:(y + itemHeight)];
        
    }
    int maxYColumnNum = [self getMaxHeightColumnNum:columnCount];
    CGFloat maxHeight = [[_columnHeightRecoder objectAtIndex:maxYColumnNum] floatValue];
    CGSize gridSize = CGSizeMake(self.contentSize.width, maxHeight);
    [self updateContentSize:gridSize];
}

- (void)updateContentSize:(CGSize)gridSize
{
    self.contentSize = gridSize;
}

- (int)columnCount
{
    return [self.dataSource columnsNumPerRow:self];
}

- (CGFloat)columnMargin
{
    return [self.dataSource marginPerCell:self];
}


- (int)getMinHeightColumnNum:(NSUInteger)columnCount
{
    if(_columnHeightRecoder.count == 0) {
        for (int i=0; i<columnCount; i++) {
            [_columnHeightRecoder insertObject:[NSNumber numberWithFloat:0.0f] atIndex:i];
        }
    }
    int num = 0;
    for (int i=0; i<columnCount; i++) {
        CGFloat minY = [[_columnHeightRecoder objectAtIndex:num] floatValue];
        CGFloat y = [[_columnHeightRecoder objectAtIndex:i] floatValue];
        if(minY > y) {
            num = i;
        }
    }
    return num;
}

- (int)getMaxHeightColumnNum:(NSUInteger)columnCount
{
    int num = 0;
    for (int i=0; i<columnCount; i++) {
        CGFloat maxY = [[_columnHeightRecoder objectAtIndex:num] floatValue];
        CGFloat y = [[_columnHeightRecoder objectAtIndex:i] floatValue];
        if(maxY < y) {
            num = i;
        }
    }
    return num;
}

- (id)dequeueReusableCellWithIdentifier:(NSString *)identifier
{
    return nil;
}


- (void)reloadData
{
    _needLayout = YES;
    [self setNeedsLayout];
}

@end

UIPinterestViewCell.h

#import <UIKit/UIKit.h>

@interface UIPinterestViewCell : UIView

@property(nonatomic,retain) NSString *identifier;

- (id)initWithReuseIndentifier:(NSString *)identifier;

@end

UIPinterestViewCell.m

#import "UIPinterestViewCell.h"

@implementation UIPinterestViewCell

- (void)dealloc
{
    self.identifier = nil;
    [super dealloc];
}

- (id)initWithReuseIndentifier:(NSString *)identifier
{
    if (self = [super init]) {
        self.identifier = identifier;
    }
    return self;
}

@end

MainViewController.h

#import <UIKit/UIKit.h>
#import "UIPinterestView.h"

@interface MainViewController : UIViewController<UIPinterestViewDelegate,UIPinterestViewDataSource>
{
    UIPinterestView *_pinterestView;
    NSMutableArray *_itemsArray;
}


@end

MainViewController.m

#import "MainViewController.h"
#import "UIPinterestViewCell.h"
#import "ItemModel.h"

@interface MainViewController ()

@end

@implementation MainViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self setUpViews];
    [self initData];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)dealloc
{
    if(_pinterestView != nil) {
        [_pinterestView release];
        _pinterestView = nil;
    }
    if(_itemsArray != nil) {
        [_itemsArray release];
        _itemsArray = nil;
    }
    [super dealloc];
}

#pragma mark - View
- (void)setUpViews
{
    _pinterestView = [[UIPinterestView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    _pinterestView.dataSource = self;
    _pinterestView.delegate = self;
    [self.view addSubview:_pinterestView];
}

#pragma mark - Delegate

- (CGFloat)pinterestView:(UIPinterestView *)pinterestView heightForItemAtIndex:(NSUInteger)index
{
    ItemModel *model = (ItemModel *)[_itemsArray objectAtIndex:index];
    if (model == nil) {
        return 0.0f;
    } else {
        return model.ratio * pinterestView.itemWidth;
    }
}

- (NSUInteger)numberOfItemsInGridView:(UIPinterestView *)pinterestView
{
    return _itemsArray.count;
}

- (NSUInteger)columnsNumPerRow:(UIPinterestView *)pinterestView
{
    return 3;
}

- (CGFloat)marginPerCell:(UIPinterestView *)pinterestView
{
    return 5.0f;
}

- (UIPinterestViewCell *)pinterestView:(UIPinterestView *)pinterestView cellForItemAtIndex:(NSUInteger)index
{
    NSString *cellIdentifier = @"cell";
    UIPinterestViewCell *cell = [pinterestView dequeueReusableCellWithIdentifier:cellIdentifier];
    if (cell == nil) {
        cell = [[UIPinterestViewCell alloc] init];
        cell.backgroundColor = [UIColor greenColor];
    }
    return cell;
}
    
#pragma mark - Data
- (void)initData
{
    _itemsArray = [[NSMutableArray alloc] init];
    
    for (int i=0; i<2; i++) {
        ItemModel *model = [[ItemModel alloc] init];
        model.name = @"Test1";
        model.ratio = 0.5f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test2";
        model.ratio = 0.8f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test3";
        model.ratio = 1.2f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test4";
        model.ratio = 1.5f;
        [_itemsArray addObject:model];
        [model release];
        
        model = [[ItemModel alloc] init];
        model.name = @"Test5";
        model.ratio = 1.2f;
        [_itemsArray addObject:model];
        [model release];
    }
}

@end

这部分代码是我已经实现过的一个版本的简略版，基本上只是表达出布局的概念。

效果图：

===================================屌丝的分割线====================================

Android:

首先，类似ListView一样构造PinterestView继承自ViewGroup,由于我的android水平还是小白级别，所以写的比较简单，对onMeasure和onLayout的处理可能也不完善，但是毕竟是实现了，欢迎拍砖。代码：

PinterestView.java

public class PinterestView extends ViewGroup {
    
    private static String PinterestViewLog = "PinterestViewLog";
    
    //datasource
    private int _columnCount = 3;
    private int _columnMargin = 5;
    private PinterestBaseAdapter _adapter = null;
    private int _columnRecorder[] =  new int[_columnCount];
    
    //flag
    private boolean _isLayouting = false;
    private boolean _needsLayout = true;

    public PinterestView(Context context) {
        super(context);
    }
    
    public PinterestView(Context context,AttributeSet attrs) {
        super(context,attrs);
    }
    
    public PinterestView(Context context,AttributeSet attrs,int defStyle) {
        super(context,attrs,defStyle);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        
        if (_adapter != null) {
//            Log.i(PinterestViewLog,"widthMode:" + widthMode + "heightMode:" + heightMode + "widthSize:" + widthSize + "heightSize:" + heightSize);
//            Log.i(PinterestViewLog,"onMeasure");
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        _isLayouting = true;
        if (_needsLayout) {
            Log.i(PinterestViewLog,"onLayout");
            layoutChildren();
            _needsLayout = false;
        }
        _isLayouting = false;
    }
    
    public void setAdapter(PinterestBaseAdapter adapter) {
        Log.i(PinterestViewLog,"setAdapter");
        _adapter = adapter;
    }
    
    public PinterestBaseAdapter getAdapter() {
        return _adapter;
    }
    
    private void layoutChildren() {
        
        int itemCount = _adapter.getCount();
        int totalWidth = this.getWidth();
        int itemWidth = (totalWidth - _columnMargin * (_columnCount + 1)) / _columnCount;
        for(int i=0; i<itemCount; i++) {
            View childView = this.obtainView(i);
            this.addViewInLayout(childView, 0, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT));
//            this.addView(childView);            
            int minColumnIndex = this.getMinHeightColumn();
            int itemHeight = _adapter.getItemHeight(i,itemWidth);
            int left = itemWidth * minColumnIndex + _columnMargin * (minColumnIndex + 1);
            int top = _columnRecorder[minColumnIndex] + _columnMargin;
            int right = left + itemWidth;
            int bottom = top + itemHeight;
//            Log.i(PinterestViewLog,"left:" + left + "top:" + top + "right:" + right + "bottom:" + bottom);
            childView.measure(itemWidth, itemHeight);//设置view 宽高
            childView.layout(left, top, right, bottom); //设置view 位置
            _columnRecorder[minColumnIndex] = bottom;
        }
    }
    
    private View obtainView(int position) {
        return _adapter.getView(position, null, this);
    }
    
    private int getMinHeightColumn() {
        int minIndex = 0;
        for (int i = 0; i < _columnRecorder.length; i++) {
            int minHeight = _columnRecorder[minIndex];
            int newHeight = _columnRecorder[i];
            if(minHeight > newHeight) {
                minIndex = i;
            }
        }
        return minIndex;
    }

需要一个Adapter.

PinterestAdapter.java：

public class PinterestBaseAdapter implements Adapter{

    private Context _context = null;
    private LayoutInflater _inflater = null;
    private ArrayList _models = null;
    
    public PinterestBaseAdapter(Context context,ArrayList models) {
        _context = context;
        _inflater = LayoutInflater.from(context);
        _models = models;
    }
    
    @Override
    public int getCount() {
        return _models.size();
    }

    @Override
    public Object getItem(int position) {
        return _models.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public int getItemViewType(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //这里的ConvertView是在PinterestView中获取的，目前全部是null，等到后面讲道virtualize的时候会有改变
        //由于这里先不考虑性能，所以也没有使用placehoder等机制
        if (convertView == null) {
            convertView = _inflater.inflate(R.layout.item_pinterest, null);
        }
        ItemModel model = (ItemModel) this.getItem(position);
        TextView nameTv = (TextView) convertView.findViewById(R.id.name_tv);
//        nameTv.setText(model.getName());
        return convertView;
    }
    
    public int getItemHeight(int position,int itemWidth) {
        ItemModel model = (ItemModel) this.getItem(position);
        return (int)(itemWidth * model.getRatio());
    }

    @Override
    public int getViewTypeCount() {
        return 0;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public boolean isEmpty() {
        return false;
    }

    @Override
    public void registerDataSetObserver(DataSetObserver observer) {
        
    }

    @Override
    public void unregisterDataSetObserver(DataSetObserver observer) {
        
    }

}

item_pinterest.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF00FF00"
    android:orientation="vertical" >
    
    <TextView android:id="@+id/name_tv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:textSize="18sp"/>

</LinearLayout>

最后Activity和main.xml:

Activity_Pinterest.java和Activity_Pinterest.xml

public class PinterestActivity extends Activity {

    private ArrayList<ItemModel> _models = new ArrayList<ItemModel>();

    private PinterestView _pinterestView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_pinterest);
        for (int i = 0; i < 2; i++) {
            initData();
        }
        initView();

    }

    private void initView() {
        _pinterestView = (PinterestView) this.findViewById(R.id.pinterest_list);
        PinterestBaseAdapter adapter = new PinterestBaseAdapter(this, _models);
        _pinterestView.setAdapter(adapter);
    }

    private void initData() {

        ItemModel model1 = new ItemModel();
        model1.setName("Test1");
        model1.setRatio(0.5);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test2");
        model1.setRatio(0.8);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test3");
        model1.setRatio(1.2);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test4");
        model1.setRatio(1.5);
        _models.add(model1);

        model1 = new ItemModel();
        model1.setName("Test5");
        model1.setRatio(1.2);
        _models.add(model1);

    }
}

<?xml version="1.0" encoding="utf-8"?>
 <com.nextstep.pinterestview.controls.PinterestView
         xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pinterest_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

效果图：

这只是个简单的demo，有很多需要注意的地方在后续我的学习伴随着我的文章中会慢慢优化的。谢谢大家指点。

===================================屌丝的分割线====================================

Windows Phone:

关于windows phone我更喜欢用MVVM,以及微软的一套控件绑定机制，如果喜欢把Android的MVC硬套过来的同学，可以对比下我前面Android实现模式，俗话说，入乡随俗，是吧。

PinterestView.cs

using System;
using System.Collections;
using System.Collections.Generic;
using System.Diagnostics;
using System.Reflection;
using System.Windows;
using System.Windows.Controls;
namespace Pinterest.Controls
{
    public class PinterestView : Control
    {

        #region Fields

        private List<object> _items = new List<object>();
        private DataTemplate _itemTemplate = null;
        private int _columnCount = 0;
        private double _columnMargin = 0.0;
        private List<double> _columnRecorder = new List<double>();
        private double _showWidth = 480;//need changed more good????
        
        private Canvas _itemContainer;
        
        #endregion

        #region Constructor
        public PinterestView()
        {
            base.DefaultStyleKey = typeof(PinterestView);
            ShareInitData();
        }

        #endregion

        #region Override

        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            GetViews();
            LoadView();
        }

        #endregion

        #region Method

        private void GetViews()
        {
            _itemContainer = (Canvas)base.GetTemplateChild("PART_ItemsContainer");
        }

        private void ShareInitData()
        {
            InitColumnRecorder();
        }

        private void InitColumnRecorder()
        {
            //Init ColumnRecorder
            for (int i = 0; i < _columnCount; i++)
            {
                _columnRecorder.Add(0.0);
            }
        }

        private void LoadView()
        {
            double totalWidth = this.Width;
            double itemWidth = (_showWidth - _columnMargin * (_columnCount + 1)) / _columnCount;
            
            for (int i = 0; i < _items.Count; i++)
            {
                object obj = _items[i];
                double ratio = this.GetModelRatio(obj);
                double itemHeight = itemWidth * ratio;
                int minColumnIndex = GetMinColumnIndex();
                double x = minColumnIndex * itemWidth + (minColumnIndex + 1) * _columnMargin;
                double y = _columnRecorder[minColumnIndex] + _columnMargin;

                Debug.WriteLine("x:" + x + "y:" + y + "" + itemWidth + "height:" + itemHeight);

                //Make ItemView
                PinterestViewItem itemView = GenerateItemView();
                //Bind To Model
                BindToModel(itemView,obj);
                //Set ItemViewSize
                SetItemSize(itemView, new Rect(x, y, itemWidth, itemHeight));
                //Add To Container
                _itemContainer.Children.Add(itemView);
                _columnRecorder[minColumnIndex] = y + itemHeight;
            }
        }

        private PinterestViewItem GenerateItemView()
        {
            return new PinterestViewItem();//no virtualize
        }

        private void BindToModel(PinterestViewItem itemView,object model) 
        {
            if(model == null) return;
            itemView.SetValue(FrameworkElement.DataContextProperty,model);
            if (_itemTemplate != null)
            {
                itemView.Content = model;
                itemView.ContentTemplate = _itemTemplate;
            }
        }

        private void SetItemSize(FrameworkElement element,Rect rect)
        {
            element.SetValue(FrameworkElement.WidthProperty, rect.Width);
            element.SetValue(FrameworkElement.HeightProperty, rect.Height);
            Canvas.SetLeft(element, rect.X);
            Canvas.SetTop(element, rect.Y);
        }

        private int GetMinColumnIndex()
        {
            int min = 0;
            for (int i = 0; i < _columnCount; i++)
            {
                double minHeight = _columnRecorder[min];
                double newHeight = _columnRecorder[i];
                if (newHeight < minHeight)
                {
                    min = i;
                }
            }
            return min;
        }

        private double GetModelRatio(object obj)
        {
            double ratio = 1.0;
            PropertyInfo property = obj.GetType().GetProperty("Ratio");
            if (property != null && property.CanRead)
            {
                ratio = (double)property.GetValue(obj);
            }
            else
            {
                throw new InvalidOperationException("The model must has the Ratio property.");
            }
            return ratio;
        }

        private void AddItems(IEnumerable dataSource)
        {
            if (dataSource != null)
            {
                IEnumerator enumerator = dataSource.GetEnumerator();
                try
                {
                    while (enumerator.MoveNext())
                    {
                        object current = enumerator.Current;
                        _items.Add(current);
                    }
                }
                finally
                {
                    IDisposable disposable = enumerator as IDisposable;
                    if (disposable != null)
                    {
                        disposable.Dispose();
                    }
                }
               
            }
        }

        #endregion

        #region DependencyProperites

        #region ItemsSource DependencyProperty
        public IEnumerable ItemsSource
        {
            get { return (IEnumerable)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }

        public static readonly DependencyProperty ItemsSourceProperty =
            DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(PinterestView), new PropertyMetadata(null, OnItemsSourceChanged));

        private static void OnItemsSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            PinterestView view = (PinterestView)sender;
            view.OnItemsSourceChanged(e);
        }

        private void OnItemsSourceChanged(DependencyPropertyChangedEventArgs e)
        {
            IEnumerable dataSource = e.NewValue as IEnumerable;
            this.AddItems(dataSource);
        }
        #endregion
       

        #region ItemTemplate DependencyProperty
        
        #endregion
        public DataTemplate ItemTemplate
        {
            get { return (DataTemplate)GetValue(ItemTemplateProperty); }
            set { SetValue(ItemTemplateProperty, value); }
        }

        public static readonly DependencyProperty ItemTemplateProperty =
            DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(PinterestView), new PropertyMetadata(null,OnItemTemplateChanged));

        private static void OnItemTemplateChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            PinterestView view = (PinterestView)d;
            view.OnItemTemplateChanged(e);
        }

        private void OnItemTemplateChanged(DependencyPropertyChangedEventArgs e)
        {
             _itemTemplate = (DataTemplate)e.NewValue;
        }

        #region ColumnMargin DependencyProperty

        public double ColumnMargin
        {
            get { return (double)GetValue(ColumnMarginProperty); }
            set { SetValue(ColumnMarginProperty, value); }
        }

        public static readonly DependencyProperty ColumnMarginProperty =
            DependencyProperty.Register("ColumnMargin", typeof(double), typeof(PinterestView), new PropertyMetadata(-1.0,OnColumnMarginChanged));

        private static void OnColumnMarginChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((PinterestView)d).OnColumnMarginChanged(e);
        }

        private void OnColumnMarginChanged(DependencyPropertyChangedEventArgs e)
        {
            _columnMargin = (double)e.NewValue;
        }

        #endregion

        #region ColumnCount DependecyProperty

        public int ColumnCount
        {
            get { return (int)GetValue(ColumnCountProperty); }
            set { SetValue(ColumnCountProperty, value); }
        }

        public static readonly DependencyProperty ColumnCountProperty =
            DependencyProperty.Register("ColumnCount", typeof(int), typeof(PinterestView), new PropertyMetadata(-1,OnColumnCountChanged));

        private static void OnColumnCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            PinterestView view = (PinterestView)d;
            view.OnColumnCountChanged(e);
        }

        private void OnColumnCountChanged(DependencyPropertyChangedEventArgs e)
        {
            _columnCount = (int)e.NewValue;
            InitColumnRecorder();
        }

        #endregion
        
        #endregion



    }
}

PinterestView.xaml

<Style TargetType="Controls:PinterestView">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:PinterestView">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Canvas x:Name="PART_ItemsContainer" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

PinterestViewItem.cs

using System.Windows.Controls;

namespace Pinterest.Controls
{
    public class PinterestViewItem : ContentControl
    {
        public PinterestViewItem()
        {
            base.DefaultStyleKey = typeof(PinterestViewItem);
        }
    }
}

PinterestViewItem.xaml

<Style TargetType="Controls:PinterestViewItem">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="BorderBrush"
                Value="Transparent" />
        <Setter Property="Padding"
                Value="0" />
        <Setter Property="HorizontalContentAlignment"
                Value="Stretch" />
        <Setter Property="VerticalContentAlignment"
                Value="Stretch" />
        <Setter Property="CacheMode"
                Value="BitmapCache" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Controls:PinterestViewItem">
                    <Grid x:Name="PART_ContainerLayout"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch">
                        <ContentControl x:Name="PART_ContainerHolder"
                                        Margin="{TemplateBinding Margin}"
                                        HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Content="{TemplateBinding Content}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

MainPage.xaml

<phone:PhoneApplicationPage x:Class="Pinterest.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            mc:Ignorable="d"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            xmlns:CT="clr-namespace:Pinterest.Controls"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True"
                            DataContext="{Binding MainVm, Mode=OneWay, Source={StaticResource Locator}}">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- LOCALIZATION NOTE:
            To localize the displayed strings copy their values to appropriately named
            keys in the app's neutral language resource file (AppResources.resx) then
            replace the hard-coded text value between the attributes' quotation marks
            with the binding clause whose path points to that string name.

            For example:

                Text="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}"

            This binding points to the template's string resource named "ApplicationTitle".

            Adding supported languages in the Project Properties tab will create a
            new resx file per language that can carry the translated values of your
            UI strings. The binding in these examples will cause the value of the
            attributes to be drawn from the .resx file that matches the
            CurrentUICulture of the app at run time.
         -->

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION"
                       Style="{StaticResource PhoneTextNormalStyle}"
                       Margin="12,0" />
            <TextBlock Text="page name"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel"
              Grid.Row="1">
            <CT:PinterestView x:Name="PinterestView"
                              ItemsSource="{Binding Items}"
                              ColumnCount="3"
                              ColumnMargin="5.0">
                <CT:PinterestView.ItemTemplate>
                    <DataTemplate>
                        <Grid Background="Green" />
                    </DataTemplate>
                </CT:PinterestView.ItemTemplate>
            </CT:PinterestView>
        </Grid>
        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
    </Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Pinterest.Resources;
using Pinterest.ViewModels;

namespace Pinterest
{
    public partial class MainPage : PhoneApplicationPage
    {
        private MainViewModel _mainViewModel;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            _mainViewModel = (MainViewModel)this.DataContext;
            // Sample code to localize the ApplicationBar
            //BuildLocalizedApplicationBar();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            _mainViewModel.NavigateTo(this, e);
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            _mainViewModel.NavigateFrom(this, e);
            base.OnNavigatedFrom(e);
        }

        // Sample code for building a localized ApplicationBar
        //private void BuildLocalizedApplicationBar()
        //{
        //    // Set the page's ApplicationBar to a new instance of ApplicationBar.
        //    ApplicationBar = new ApplicationBar();

        //    // Create a new button and set the text value to the localized string from AppResources.
        //    ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
        //    appBarButton.Text = AppResources.AppBarButtonText;
        //    ApplicationBar.Buttons.Add(appBarButton);

        //    // Create a new menu item with the localized string from AppResources.
        //    ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
        //    ApplicationBar.MenuItems.Add(appBarMenuItem);
        //}
    }
}

MainViewModel: 

using Microsoft.Phone.Controls;
using Pinterest.Helpers;
using Pinterest.Models;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Navigation;

namespace Pinterest.ViewModels
{
    public class MainViewModel : ViewModelBase
    {

        #region Fields

        private ObservableCollection<ItemModel> _items = new ObservableCollection<ItemModel>();

        #endregion

        #region Constructor
        public MainViewModel()
        {

        }

        #endregion

        #region Properties
        

        public ObservableCollection<ItemModel> Items
        {
            get { return _items; }
            set
            {
                if (value != _items)
                {
                    _items = value;
                    this.NotifyOfPropertyChange(()=>this.Items);
                }
            }
        }
        
        #endregion

        #region Method

        private void InitData()
        {
            List<ItemModel> list = new List<ItemModel>();

            for (int i = 0; i < 2; i++)
            {
                ItemModel model1 = new ItemModel { Name = "Test1", Ratio = 0.5 };
                ItemModel model2 = new ItemModel { Name = "Test1", Ratio = 0.8 };
                ItemModel model3 = new ItemModel { Name = "Test1", Ratio = 1.2 };
                ItemModel model4 = new ItemModel { Name = "Test1", Ratio = 1.5 };
                ItemModel model5 = new ItemModel { Name = "Test1", Ratio = 1.2 };
                list.Add(model1);
                list.Add(model2);
                list.Add(model3);
                list.Add(model4);
                list.Add(model5);
            }

            list.ToObservable<ItemModel>(this.Items);
        }

        #endregion

        #region Override

        public override void NavigateTo(PhoneApplicationPage page, NavigationEventArgs e)
        {
            InitData();
        }


        public override void NavigateFrom(PhoneApplicationPage page, NavigationEventArgs e)
        {

        }

        #endregion

    }
}

效果图

 

5.代码下载地址:

http://pan.baidu.com/s/1AB4TT(百度网盘)