https://github.com/captaincodeman/dry-stone-layout

Masonry-like layout with no gaps
https://github.com/captaincodeman/dry-stone-layout

layout masonry polymer polymer-element webcomponents

Last synced: 5 months ago
JSON representation

Masonry-like layout with no gaps

• Host: GitHub
• URL: https://github.com/captaincodeman/dry-stone-layout
• Owner: CaptainCodeman
• Created: 2017-03-04T17:14:08.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-23T12:32:59.000Z (over 6 years ago)
• Last Synced: 2025-04-04T10:33:39.571Z (6 months ago)
• Topics: layout, masonry, polymer, polymer-element, webcomponents
• Language: HTML
• Size: 3.77 MB
• Stars: 15
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/CaptainCodemandry-stone-layout)

[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/CaptainCodemandry-stone-layout.svg)](https://vaadin.com/directory/component/CaptainCodemandry-stone-layout)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/CaptainCodeman/dry-stone-layout)

_[Demo and API docs](http://captaincodeman.github.io/dry-stone-layout/)_

# \

`dry-stone-layout` is a layout element that creates a masonry-like layout with no gaps

perfect for responsive image galleries. If you've ever seen dry-stone walls in the UK,

you'll understand the name.

![Example](demo/screenshot.png)

Based on these previous ideas:

* [Algorithm for a perfectly balanced photo gallery](https://medium.com/@jtreitz/the-algorithm-for-a-perfectly-balanced-photo-gallery-914c94a5d8af#.8qss863p6)

* [Google Plus image layout algorithm](http://blog.vjeux.com/2012/image/image-layout-algorithm-google-plus.html)

* [Packing images in a grid](http://fangel.github.io/packing-images-in-a-grid/)

```html

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

```