https://benjamindickens.github.io/grid-mosaic-demo/
npm install grid-mosaic
- Add a container to your page with "mosaic" class.
- Add items with "mosaic-item" class to the container.
<div class="mosaic">
<a href="/test" class="mosaic-item">
<img src="https://picsum.photos/200" alt="photo">
</a>
or
<img class="mosaic-item" src="https://picsum.photos/200" alt="photo">
or you can add any additional html if needed
<a href="/" target="_blank" class="mosaic-item">
<img src="https://picsum.photos/200" alt="photo">
<div class="mosaic__tooltip">
<div class="mosaic__tooltip-title">Title</div>
<div class="mosaic__tooltip-content">Content</div>
</div>
</a>
</div>
- Initialize the app in your js file with default set up or modify it manually.
import Mosaic from "grid-mosaic";
new Mosaic(".mosaic")
or with an option object
new Mosaic(".mosaic", options)
Choose a measurement unit you are going to use in your app.
measure: "px" / "em" / "rem" || default: "px";
Set dimensions for grid container. The value "size" specifies "min-width" and "height" of cells. It applies necessary styles to the container. By default, for desktop "grid-template: repeat(5, 90px/rem/em) / repeat(5, minmax(90px/rem/em, 1fr))". To set the correct measurement unit use option "measure". The default value of max-width for each cell is 1fr. If you don't want the mosaic to stretch for the whole page, specify the "width" value of the container in css.
dimension: {
desktop: {
cols: number || default : 5,
rows: number || default : 5,
size: number || default : 90
},
mobile: {
cols: number || default : 3,
rows: number || default : 6,
size: number || default : 90
},
};
It means max amount of cells one item can occupy.
maxSize: {
desktop: {
y: number || default: 3,
x: onumber || default: 3,
},
mobile: {
y: number || default: 3,
x: number || default: 3,
}
};
Max amount of items that are shown in the container. Others will appear through the animation.
maxItems: {
desktop: number || default: null,
mobile: number || default: null,
};
Takes array of objects to specify places occupied in current mosaic and places them. The example below place the el into container by assigning the rule in format "grid-area: 5 / 1 / span 2 / span 7"
otherElements: [{
el: document.querySelector(".js-caption"),
coordinates: {
desktop: [5,1,2,7],
mobile: [1,2,4,3]
}
}, {....}] || default: [];
Draw additional background items to take over all container.
bg: true / false || default: true;
You may specify main color for background elements or pass the array of classes that will be implemented to elements in random sequence.
bgStyles: {
background: #bada55 || default : #FFFFFF,
classes: ["class-1", "class-2" ...] || default: null
};
Specify the rules for bg animation. It is activated by default. If you want to disable it set "0" or "false". Effects - allow you to pass classes that will perform the animation.
bgAnimation: {
delay: number / false || default : 8000,
effects: ["_slide-0", "slide-1" ...] || default : ["_illuminate-0", "_illuminate-1", "_illuminate-2", "_illuminate-3"]
}
Prevent items from a bad aspect ratio.
noSausagePatterns: true / false || default : true;
Shuffle the elements in the container to get a random sequence after the page reload.
randomItems: false / true || default : true;
Specify a grid-gap. (You can do it in css.)
gaps: {
desktop: number || default: 0,
mobile: number || default: 0,
};
Specify the items of the mosaic.
items: [...] || default: document.querySelectorAll(".mosaic-item");
The settings of the animation (that changes the position of the elements within the container) delay. It is activated by default. If you want to disable it set "0" or "false".
autoplay: {
delay: number / false || default : 3500,
preventDefaultHover: true / false || default : false,
opacityDefaultOutDuration: number || default: 500,
};
Here you can add your custom functions.
on: {
mouseEnter: () => { your code ...} || default: null,
mouseLeave: func || default: null,
beforeInit: func || default: null,
afterInit: func || default: null
}
The max amount of tries of calculation an item position.
maxTries: number || default: 60 ;
The value of @media (in pixels).
breakpoint: number || default: 667;