Mosaic Tiling Plugin is a simple JavaScript plugin that allows you to display images in a mosaic format. It has some extensibility, which can make adding lazy loading classes easy and simple.

What is mosaic tile?

Mosaic tiling is a simple feature that allows you to load images as much as possible in a given space.

js grid mosaic flat, masonry gallery with lightbox jquery, responsive masonry gallery, mosaic css grid, mosaic image gallery, how to make responsive grid in css

Options

There are several options the user can change, hoping to keep the plugin usable:

Container: The container is the global div identifier that the plugin uses to write all elements to it. This will be emptied by the plugin when the load function is called. Default value: masonryContainer

masonryColumn: This is the class applied to each “column” in the container. Default value: masonryColumn

masonryImgDiv: This is the class applied to every div containing an image. Mostly here for scalability, I personally used it for lazy loading. Default value: masonryImgDiv

masonryImg: This is the class applied to each image. Default value: masonryImg

Columns: This is an integer representing the number of columns to be generated by the plugin. I chose to simply include this here instead of hard coding in it so people can specify how many columns they want/need. This could very easily be expanded to include more breakpoints etc, but that was enough for my own purposes. Default value: 6

mobileColumns: This is an integer representing the number of columns that will appear when the width of the window is less than the segment number (defined next). Very simple, but can be expanded further in the add. Default value: 3

smallCutoff: This is an integer representing the width of the window where the screen will convert the number of columns to the mobileColumns value specified above. Default value: 800

imagesArray: As the name suggests, the array will contain all the image links. Default value: null

lazyLoading: This controls whether images entered into the plugin will appear by default. It will set the default src img to a simple spin if set to true and set the image itself if set to false. Default value: False

lazyLoadingClass: This is the class that will be applied to lazy-loaded images. When an image appears with the masonryImg tag and this tag as it is in its category, the image will be loaded. Default value: lazy

<link rel="stylesheet" href="mosaic-styles.css" />
<script src="lazy-load-mosaic-tile-script.js"></script>

<div id="masonryContainer">
</div>

myImages = [
  "1.png", 
  "2.jpg",
  "3.webp",
  // ...
]

var mosaic = new mosaicLayout({
    imagesArray: myImages
});

mosaic.initiate();

var mosaic = new mosaicLayout({
    imagesArray: myImages,
    // container CSS
    container: "masonryContainer",
    // column CSS
    masonryColumn: "masonryColumn",
    // CSS class of image container
    masonryImgDiv: "masonryImgDiv",
    // CSS class of each image
    masonryImg: "masonryImg",
});

var mosaic = new mosaicLayout({
    imagesArray: myImages,
    columns: "6",
    mobileColumns: "3",
    smallCutoff: 800 // breakpoint
});

var mosaic = new mosaicLayout({
    imagesArray: myImages,
    lazyLoading: false,
    lazyLoadingClass: 'lazy',
});

Official Website(cspeloso): Click Here

This superior jQuery/javascript plugin is developed by cspeloso. For extra Advanced usage, please go to the official website.