如何使用离子创建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;
  }
}