Layout like staggered layout in android

1

Hi,

is there any way to organize my cards like google plus?
which is staggered grid layout in android.
https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html

Thanks,

2

Define an ionic grid with one row and 3 columns, then try to put several cards per column.

3

I google for a while,
and I found masonry is what I want.
thank you~~~

4

Great.
Please post feedback here when you have more experience with it in an Ionic context.

5

sigh… tried two days but always get a SINGLE column layout…
without ng-repeat is good,
but not working with ng-repeat. every item occupy 100% width ever if I set width=200px

6

Did you try my suggestion to define an ionic grid with 1 row and 3 columns, splitting your list of cards in 3 lists in you controller?

7

I find out how to get rid of it

(1) use https://github.com/klederson/angular-masonry-directive
(2) don’t use ion-list and ion-item; use div directly…

9

manually create columns/rows is working well.
the problem is adjusting layout dynamically by masonry.

I found that if I use div, everything is good.
if I use ion-item and ion-list, nothing good.

Is there any working sample code that use ion-list+ion-item+card+ng-repeat+masonry+ion-infinite-scroll?