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

Question

我已经搜索了几个小时了，现在如何使用包装与聚合物元素相结合。我想要实现的是一个元素，它是一个内容列表，其中有一个元素是内容项。我希望内容项目是"打包的"。

说明:

<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问题。如有任何反馈，我们将不胜感激。

我们用一些额外的特性扩展了它，比如:

• 优先项目，
• 分组到虚拟的嵌套容器，
• 不同方向/方向的对齐，
• 动态改变大小，
• 自动调整容器大小，
• 缝隙/沟槽/格子间距，
• 适应窗口大小变化。

并创建了两个侧组件:

• <juicy-tile-grid> -使用本地CSS网格布局的自适应特性，
• <juicy-tile-editor>使摆弄瓷砖更容易。

我们还计划将核心砌体/包类行为从所有其他功能中分离出来，以使代码更干净，更快速，

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