1.0.2 • Published 7 years ago
content-tiles v1.0.2
content-tiles
A library to generate tiled content in a way that preserves aspect ratios. Works with any content as long as you provide a width and height.
Very deeply inspired by automatic-image grid by beije on github.
Installation
Install via npm:
npm install content-tiles
Or download the package and include the file at the end of your page:
<script src="dist/content-tiles.min.js"></script>
Usage
Once the DOM has been loaded you can initialise the library by calling init()
.
ContentTiles.init({
// parameters (see below)
});
Parameters
These can be passed to the init()
method as a hash.
spacing
- width of the border between content items in px (default: 0)containerClass
- CSS class of the container (default:content-grid
)innerClasses
- CSS classes on elements inside the items that should also be explicitly resized e.g. overlays (default:[]
)itemClass
- CSS class of items in the container (default:content-item
)rowHeight
- ideal height of rows of content in px (default:400
)
The spacing
and target-height
can also be set as data attributes on the container.
<div class="content-tiles spaced-tiles" data-row-height="200" data-spacing="20">
Example
Check out the examples page.
Roadmap
- Add a
redraw()
method that removes content from rows and then recalculates the tiling (useful for screen size or orientation changes) - Move away from using data-attrs to improve performance
- IE8 support could be added by moving away from
getElementsByClassName()