dakmor / grain-masonry Goto Github PK

6.0 1.0 0.0 9 KB

License: MIT License

HTML 100.00%

grain-masonry's Introduction

<grain-masonry>

Wrapper for the amazing masonry grid. (https://masonry.desandro.com/)

Demo

<grain-masonry transition-duration="250">
  <article style="height: 30px;">Power</article>
  <article style="height: 50px;">To</article>
  <article style="height: 25px;">The</article>
  <article style="height: 35px;">People</article>
  <article style="height: 40px;">!</article>
</grain-masonry>
<style>
  article {
    background: #36abcc; width: 29%; margin: 2%; color: #fff; display: flex; align-items: center; justify-content: center;
  }
</style>

Installation

$ bower install --save daKmoR/grain-masonry

Getting Started

Import the package.

<link rel="import" href="/bower_components/grain-masonry/grain-masonry.html">

For more information, see the API documentation.

Working on the Element

First, make sure you have the Polymer CLI installed.

View the Element via polymer serve
Run tests via polymer test

grain-masonry's People

Contributors

Stargazers

Watchers

grain-masonry's Issues

Overlapped Elements

My container has images and of course they can be different sizes. Of course I am using width: 100% and height auto for images.

By reading the documentation in the imagesLoaded
Unloaded images can throw off Masonry layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded is a separate script

Url
https://masonry.desandro.com/layout.html.

Does your component handle this extra script needed?

Items get re-rendered after finshed loading, when prepending items

<grain-masonry id="cardGrid" transition-duration="500" item-selector="article"></grain-masonry>

on load, i append the children and this works fine
this.$.cardGrid.appendChild(card);
(card is just an element i created, tried with normal article as in example, same result)

but if i switch it to
this.$.cardGrid.prependChild(card);

the grid loads and then instantly reloads again, causing this janky feeling. This stays on when i resize also and is not just during first load.

Any i idea how to solve this?

Add as first or last element will not use an animation

reason being that dom change reinits masonry to pick up the correct order from dom.
=> but with proper checking for first and last position it could handle nice animation in these situations

possible feature if anyone needs it just let me know

Is there a way to center items?

Is there a way to center items?

Proposition:
It would be great if there's a way to align items left, right or center. Like a property.
The property would be called align, and its possible values would be (like a flexbox):

left
right
center
space-between
space-around
space-evenly

Using a dom-repeat inside the grain-masonry not working

I am getting errors using a dom-repeat to fill the masonry.
The functions to add elements are not called propperly when the dom-repeat stamps the items.