Packs grids into rows so that each row expands to the full container width. Row heights are dynamically adjusted. Similar to Masonry, but the space taken by all the grids will always be a rectangle without any jagged edges. By being horizontal, users view the grid linearly (scan left to right, top to bottom) kind of like a comic book.
Demo: http://jonathanong.github.io/horizontal-grid-packing/
See:
- https://github.com/math-utils/linear-partition
- https://news.ycombinator.com/item?id=6198400
- http://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery
If you use component, the dependencies are handled for you. If you use bower, the dependencies are packaged together.
component install jonathanong/horizontal-grid-packing
bower install horizontal-grid-packing
The HTML must strictly be a single container whose children are strictly grid elements.
<div>
<img data-width="100" data-height="320">
<div data-aspect-ratio=".55"></div>
<element></element>
<element></element>
</div>
This library assumes you know the aspect ratio of each grid element.
Each element should either have a data-aspect-ratio
attribute (width/height) or both data-width
and data-height
attributes.
If you do not know these attributes, use a library such as imagesloaded to calculate the dimensions before using this library.
This library will not attempt to figure out the dimensions of each grid element.
Returns a new instance of Pack
.
var pack = new HorizontalGridPacking(container, options)
new
is optional.
container
is the element that contains all the grids.
The options
are:
height
- Target row height in pixels.120
by default.padding
- Padding between each grid in pixels.0
by default.
Each of these options can be changed as an attribute of pack
:
// Change the target height
pack.height = Math.round(window.outerHeight / 5)
// Change the padding
pack.padding = 5
// Recalculate the grid
pack.reload()
Other options you may be interested are:
width
- the width of the grid in pixels. You should change this whencontainer
's width changes.
Recalculates the grid.
Specifically, you would want to use this when container
is resized:
window.addEventListener('resize', function () {
pack.width = container.clientWidth
pack.height = Math.round(window.outerHeight / Math.PI)
pack.reload()
})
Destroys the grid and returns container
to its original state.
Creates the grid. This is called by default. You should only use this if the grid has been previously destroyed.
Append elements to the current grid.
Could either be a DocumentFragment
instance whose child nodes are elements
,
or an array-like variable of grid elements
.
Appends using DocumentFragment
, so don't worry about reflows.
IE9+ (Pull requests welcome for IE8)
The MIT License (MIT)
Copyright (c) 2013 Jonathan Ong [email protected]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.