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

【问题标题】：How to create a Pinterest-style layout using ionic?如何使用 ionic 创建 Pinterest 风格的布局？
【发布时间】：2016-04-09 00:10:13
【问题描述】：

我是 ionic 新手，一直坚持如何使用 ionic 创建 Pinterest 风格的布局。这就像两个可变高度项目的列表。任何人都可以帮助我吗？谢谢。

【问题讨论】：

【解决方案1】：

类似this？

由于 Ionic 使用了CSS flexbox，您可以创建具有两列等间距的一行：

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

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

    </div>
</div>

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

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

【讨论】：

不客气@moyuan...如果正确请标记答案
如果我有 1 个对象列表，如何将列表分配到 2 列？
只需在您的 ng-repeat 中使用 $index。在第一列中使用 {{list[$index]}}，在第二列中使用 {{list[$index+1]}}。或者您可以在 js 文件中将列表拆分为 2 个单独的列表。

【解决方案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;
  }
}

【讨论】：