title: Sync item in switchable layouts on grid and list in ionic framework
body: <p>I had made a swtichable layout (grid or list) in ionic.</p>
  
  <p><a href="http://codepen.io/WilsonFpz/pen/jPYqBq" rel="nofollow noreferrer">http://codepen.io/WilsonFpz/pen/jPYqBq</a></p>
  
  <pre><code>   &lt;a class="" ng-class="{active: layout == 'list'}" ng-click="layout = 'list'"&gt;List&lt;/a&gt;
     &lt;a class="" ng-class="{active: layout == 'grid'}" ng-click="layout = 'grid'"&gt;Gird&lt;/a&gt;
  </code></pre>
  
  <p>As you can see in the codepen, user can choose the layout to show items (~100 in the case).</p>
  
  <p>But there are some problem about sync when scrolling item and it caused bad UX.
  <img src="https://i.stack.imgur.com/c7nCv.png" alt="enter image description here"></p>
  
  <p>As you can see in the attachment image, when the user scroll to about the 56th item in the list layout, </p>
  
  <p>the item is still about 42th in the grid layout.</p>
  
  <p>This is caused by the height differences for grid and list.</p>
  
  <p>Could someone give me some trick about how to sync roughly when user switch?</p>
  
  <p>Thanks.</p>