Question

我现在一直在寻找如何使用与聚合物元素结合的包装。我想要实现的是一个内容列表元素，其中包含一个内容项元素。我希望内容项目是＆＃34; packaried＆＃34;。

澄清：

<packery-element>
<template repeat="{{item in items}}">
<content-item class="item"></content-item>
</template>
</packery-element>

Answer 1

我们创建了自己的自定义元素，它也使用了bin-packing算法： <juicy-tile-list>：http://juicy.github.io/juicy-tile-list/

然后，您只需要：

<link rel="import" href="../juicy-tile-list/dist/juicy-tile-list.html">
...
<juicy-tile-list>
  <div>Some</div>
  <div>tiles</div>
  <section>here</section>
</juicy-tile-list>

我们非常关注这一项的开发，所以如有任何问题，请填写GH issue。我们将非常感谢任何反馈。

我们将其扩展为additional features几个，如：

pririties items，
分组到虚拟的嵌套容器中
在不同方向/方向上对齐，
动态改变大小，
自动调整容器尺寸，
瓷砖之间的间隙/沟槽/单元间距，
适应窗口大小的变化。

并创建了两个侧面组件：

<juicy-tile-grid> - 使用原生CSS网格布局的自适应功能
<juicy-tile-editor>更容易摆弄瓷砖。

我们还计划将核心Masonry / Packery行为与所有其他功能分开，以获得更清晰，更快速的代码，适用于那些不需要的代码。

Answer 2

以下示例可能是一个简单的packery-element.html导入：

  <script src="http://packery.metafizzy.co/packery.pkgd.js"></script>

  <polymer-element name="packery-element" block>
    <script>
      Polymer({
        domReady: function() {
          this.packery = new Packery(this, {
            itemSelector: '*',
            gutter: 10
          });
        }
      });
    </script>
  </polymer-element>

直播http://jsbin.com/qoqati/1/edit

我如何使用聚合物元素的包装？

2 个答案: