Pinterest style collection-repeat

ionic-v1
1

Hi, I have a problem that does not lead me to sleep for 2 nights, I want to make a pinterest style grid with a collection-repeat (use collection-repeat for performance) if I do it in ng-repeat it goes perfect but slow. I have two columns in one position the pairs and in another the odd ones, the objects have variable height and I calculate item-height according to the size of the photo, works perfect but I want two columns one to the left and one to the right, as I do now to be able.

this works great

    <ion-content has-header="false" has-footer="false" class="inicioview" overflow-scroll="true">
<ion-refresher on-pulling="pulling()" on-refresh="doRefresh()"></ion-refresher>
<div class="row">
  <div class="col col-50">
    <ion-list>
      <div class="list card product animated fadeIn" ng-repeat="producto in productos track by $index" ng-if="producto.position % 2 != 0" href="#/app/playlists/{{producto.id}}">
        <div class="item item-image">
          <img style="width:100%;" class="productimage" src="{{producto.path}}">
        </div>
        <a class="item infoprd">
          <span class="prdprice">{{(producto.price | number:0) + "€"}}</span>
          <span class="prdtitle">{{producto.title}}</span>
        </a>
      </div>
    </ion-list>
  </div>
  <div class="col col-50">
    <ion-list>
      <div class="list card product animated fadeIn" ng-repeat="producto in productos track by $index" ng-if="producto.position % 2 == 0" href="#/app/playlists/{{producto.id}}">
        <div class="item item-image">
          <img style="width:100%;" class="productimage" src="{{producto.path}}">
        </div>
        <a class="item infoprd">
          <span class="prdprice">{{(producto.price | number:0) + "€"}}</span>
          <span class="prdtitle">{{producto.title}}</span>
        </a>
      </div>
    </ion-list>
  </div>
</div>
<ion-infinite-scroll on-infinite="loadMore({{nextpage}})" distance="1%"></ion-infinite-scroll>

And this in collection repeat

<ion-content has-header="false" has-footer="false">
<ion-refresher on-pulling="pulling()" on-refresh="doRefresh()"></ion-refresher>
<div class="product-outter" collection-repeat="producto in productos track by $index" item-width="100%" item-render-buffer="40" force-refresh-images="false" ng-click="gotosingle(producto)" item-height="getItemHeight(producto.height)">
  <div class="list card product animated fadeIn" style="width:{{getItemWidth(producto.width)}}px;">
    <div class="item item-image">
      <img style="width:getItemHeight(producto.width)" class="productimage" src="{{producto.path}}">
      <i class="icon ion-ios-arrow-back"></i>
    </div>
    <a class="item infoprd">
      <span class="prdprice">{{producto.height}}//{{(producto.price | number:0) + "€"}}</span>
      <span class="prdtitle">{{producto.title}}</span>
    </a>
  </div>
</div>
<ion-infinite-scroll on-infinite="loadMore({{nextpage}})" distance="3%"></ion-infinite-scroll>