<!DOCTYPE html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
title
>jQuery rowGrid Plugin</
title
>
<
style
>
body {
text-align: center;
overflow-y: scroll;
}
.container:after {
clear: both;
}
.container:before,
.container:after {
display: table;
content: "";
}
.item.invisible {
display: none;
}
.item {
float: left;
margin-bottom: 16px;
}
.item img {
max-width: 100%;
vertical-align: bottom;
max-height: 100%;
}
@media (max-width: 500px) {
.item {
float: none;
margin-right: auto;
margin-left: auto;
}
}
.first-item {
clear: both;
}
.last-row,
.last-row~.item {
margin-bottom: 0;
}
.btnClass {
padding: 1em;
margin: 1em;
}
</
style
>
<
script
src="jquery.row-grid.js"></
script
>
<
script
>
var imagecounter = 1;
var container;
document.addEventListener(
'DOMContentLoaded', function() {
container = document.getElementById('container');
var addItemsBtnVar =
document.querySelector('#addItemsID');
addItemsBtnVar.addEventListener(
"click", function() {
addItems();
});
// Function call to add image items
addItems();
/* Start jQueryrowGrid.js plugin and its options */
rowGrid(container, {
itemSelector: '.item:not(.invisible)',
minMargin: 15,
maxMargin: 35,
// The class of first image item of each row
firstItemClass: 'first-item',
// The class of first image item in the last row
lastRowClass: 'last-row',
minWidth: 500,
// Resizing is done for responsive webpages
resize: true
});
});
/* Function to add sample images from the items array */
function addItems() {
for (var i = 0; i <
items.length
; i++) {
var
item
=
items
[i];
var
itemElement
=
document
.createElement('div');
itemElement.className += item.itemClass;
var
imgElement
=
document
.createElement('img');
//In the following, please add your own image files path
imgElement.src = "images-path/" + imagecounter + ".jpg";
imgElement.setAttribute('width', item.width);
imgElement.setAttribute('height', item.height);
itemElement.insertAdjacentElement('afterbegin', imgElement);
container.insertAdjacentElement('beforeend', itemElement);
imagecounter++;
}
};
const items = [{
width: 220,
height: 200,
itemClass: "item"
}, {
width: 180,
height: 200,
itemClass: "item"
}, {
width: 250,
height: 200,
itemClass: "item"
}, {
width: 200,
height: 200,
itemClass: "item"
}, {
width: 190,
height: 200,
itemClass: "item"
}, {
width: 260,
height: 200,
itemClass: "item"
}, {
width: 220,
height: 200,
itemClass: "item"
}, {
width: 220,
height: 200,
itemClass: "item"
},
];
</script>
</
head
>
<
body
>
<
h1
style="color:green"> GeeksForGeeks </
h1
>
<
b
>jQuery rowGrid Plugin</
b
>
<
p
>Click the button to add more image items.</
p
>
<
div
id="container" class="container">
</
div
>
<
button
class=".btnClass" id="addItemsID">Add items</
button
>
</
body
>
</
html
>