I'm looking to create a unique collage using 10 image files in a folder with vanilla JS. The goal is to randomize the images within a Bootstrap container on a website while maintaining their aspect ratio by utilizing a grid layout. However, I've been struggling to find a solution for randomly placing the images inside the container.
While searching, I came across an example that involves uploading files here.
Here's an example of how the HTML code may look:
<div class="container">
<div class="masonry">
<div class="masonry-item">
<img class="masonry-content " src="./images/Gallery/001.JPG" />
</div>
<div class="masonry-item">
<img class="masonry-content " src="./images/Gallery/002.JPG" />
</div>
<div class="masonry-item">
<img class="masonry-content " src="./images/Gallery/009.JPG" />
</div>
</div>
</div>
And here are some functions used in JavaScript to handle resizing and positioning the items:
// JavaScript Functions
function resizeMasonryItem(item){
// function details here...
}
function resizeAllMasonryItems(){
// function details here...
}
function waitForImages() {
// function details here...
}
var masonryEvents = ['load', 'resize'];
masonryEvents.forEach( function(event) {
window.addEventListener(event, resizeAllMasonryItems);
} );
// CSS styling
.masonry {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
grid-auto-rows: 0;
}
.masonry-item {
border-radius: 5px;
// additional CSS properties...
}