Responsive application of Flickr's Justified Layout with optional sorting and filtering.
Tessarray works with a container and a set of boxes. If the boxes contain images, Tessarray can calculate the dimensions of the box, otherwise dimensions need to be passed in.
<div id="container">
<div class="box">
<img style="height: 100%; width: 100%;" src="#" />
</div>
<div class="box" data-aspect-ratio="1.333">
<sgv>...</svg>
</div>
<div class="box" data-height="900" data-width="1600" style="background-color: red;">
</div>
</div>var tessarray = new Tessarray('.box', '#container', {
// Options, defaults listed
selectorClass: false,
// Add selectorClass if you want to be able to sort and filter the boxes.
// Each of the selectors should have the class of selectorClass, and a
// data-category value equal to the value they filter on.
// If a box is supposed to show in a certain filter, give the box the class
// of the data-category value on the corresponding selector.
// If a box is supposed to render in a certain position, assign that position
// with a data attribute of the filter class, and give it a numerical value.
imageClass: false,
// Specifies what element is the image is within the box.
// By default, Tessarray searches for an <img> tag in each box.
// If you have multiple <img> tags in a box or you are not using <img> tags,
// give the image the class of your assigned imageClass instead.
defaultCategory: false,
// Filters by given category on initial render
resize: true,
// Allows the resizing of the window to trigger a re-rendering of the boxes
// if containerClass is given and the container is not statically sized
containerTransition: {
duration: 375,
timingFunction: 'ease-in',
delay: 0
},
// Options for the container's opacity transition. Used to fade in container
// once its dimensions have loaded
boxTransition: {
duration: 375,
timingFunction: 'ease-in',
delay: 0,
},
// Options for box transitions. This transition data is used when boxes are
// faded in (upon load), resized, moved, and scaled in and out.
boxTransformOutTransition: {
duration: 250,
timingFunction: "ease-in",
delay: 0
},
// Options for the transition out for boxes. This transition data is used when boxes
// are scaled out.
containerLoadedClass: 'container-is-loaded',
// Determines what class is added to the container once its dimensions have loaded
boxLoadedClass: 'is-loaded',
// Determines what class is added to a box once its contents have loaded
containerLoadedCallback: false,
// Callback that is called when container has loaded
boxLoadedCallback: false,
// Callback that is called every time a box is loaded
flickr: {}
// Pass in your Justified Layout options that differ from the defaults
});A complete list of Flickr's Justified Layout options and defaults can be found here.
Open Source Licensed under the MIT license.