Download the dist/gallerygrid.js or the minified dist/gallerygrid.min.js and include it into your site. These standalone distributable files need jQuery (tested with jQuery 3.1.0) which is not included.
npm install gallerygrid --save
bower install gallerygrid.js --save
GalleryGrid needs a certain HTML structure with CSS formatting. The required HTML is a container (e.g. a
ul) that contains items (e.g.
li) that contain an image (e.g.
svg) and anything else to enrich the item. Images should have
data-height attributes that contain the image size in pixels, which is required to calculate the grid before the images are loaded. If you cannot provide these attributes, you need to defer application of the grid until all images are loaded, so the sizes can be read from HTML5 attributes.
CSS formatting must be applied to make sure that the container and items have zero padding (
padding: 0;) and the items must also be displayed as inline blocks (
display: inline-block;). There must not be any whitespaces (including line breaks) between end and start tags of items or browsers will render a space between the items that breaks the layout.
A GalleryGrid object is created and used like this:
// create an instance// container can be a CSS selector, DOM element or jQuery elementvar grid = container// options: given values are the default values// thickness of the border around an item in pixels, which is the sum of css margin and border propertiesborder: 0// ideal pixel height that a row in the layout should havetargetHeight: 250// minimum container width at which the layout will be applied (useful to apply a responsive alternative layout [e.g. pure CSS] to extremely small screen sizes)minWidth: 0// automatically update the layout when the window size changes.updateOnResize: true// selector for the actual element to resize within an item (will be an img most of the time, but can be an svg too or any other element that has a size)itemSelector: 'img';// instance methods// apply layout to containergrid;// update layout// e.g. when container size has changed and updateOnResize is false// method is only executed when the container size has changedgrid;// forced layout update// to be used when the items have changed but the container size stays the same (e.g. when new items are added dynamically)grid;// remove the layoutgridclear;
<!-- note the missing space between end and start tags -->