如何使用离子创建Pinterest风格的布局？

Question

我是离子的新手，并坚持如何使用离子创建Pinterest风格的布局。它就像两个可变高度项目的列表。有人可以帮帮我吗？感谢。

Answer 1

像this之类的东西？

由于Ionic使用CSS flexbox，您可以使用两个等距列创建一行：

<div class="row">
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>

之后，您可以在两列内使用ionic cards和ng-repeat。

另一个解决问题的好方法是深入了解ionic market提供的现有主题。我希望这能让你开始......

Answer 2

在html文件中创建这两个级别的结构：

<div class="pins">
  <div class="pin" *ngFor="let item of items">
    <img [src]="item.mage"/>
  </div>
</div>

pins和pin css样式为：

.pins {
  column-count: 10;
  .pin {
     margin: 10px 5px 10px 5px;
     display: inline-block;
  }
}