如何使用ionic创建Pinterest风格的布局

Question

我是ionic的新手，一直致力于如何使用ionic创建Pinterest风格的布局。这就像两个大的可变高度项目列表。有人能帮我吗？谢谢

Answer 1

类似的东西？

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

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

之后，你可以使用离子卡，在两列内重复一次。

另一个解决问题的好方法是深入研究离子市场提供的现有主题。我希望这能让你开始。。。

Answer 2

创建了这个两级结构：

<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;
  }
}