Horizontal grid packing
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.
component install jonathanong/horizontal-grid-packingbower install horizontal-grid-packing
The HTML must strictly be a single container whose children are strictly grid elements.
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
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
var pack = container options
new is optional.
container is the element that contains all the grids.
height- Target row height in pixels.
padding- Padding between each grid in pixels.
Each of these options can be changed as an attribute of
// Change the target heightpackheight = MathroundwindowouterHeight / 5// Change the paddingpackpadding = 5// Recalculate the gridpackreload
Other options you may be interested are:
width- the width of the grid in pixels. You should change this when
container's width changes.
Recalculates the grid.
Specifically, you would want to use this when
container is resized:
windowaddEventListener'resize'packwidth = containerclientWidthpackheight = MathroundwindowouterHeight / MathPIpackreload
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
or an array-like variable of grid
DocumentFragment, so don't worry about reflows.
IE9+ (Pull requests welcome for IE8)
The MIT License (MIT)
Copyright (c) 2013 Jonathan Ong email@example.com
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.