jQuery proporciona un complemento rowGrid muy simple, fácil de usar y receptivo que ayuda a los programadores a mostrar imágenes en una fila recta. Es muy liviano y admite la función de desplazamiento infinito. Ejemplos reales de rowGrid son las imágenes de Google+ o la búsqueda de imágenes de Google que aparece en una cuadrícula de filas rectas.
Descargue el complemento rowGrid.js . Incluya los archivos requeridos en su carpeta de trabajo como se muestra en los siguientes ejemplos.
Nota: Todos los elementos de la imagen deben tener la misma altura, pero pueden diferir en el ancho. Todas las filas coinciden con el ancho del contenedor principal. Si una fila no es suficiente, reduce automáticamente los elementos a la fila siguiente.
Ejemplo 1: en el siguiente ejemplo, la lista de elementos de imagen se toma en un contenedor HTML. La altura de todas las imágenes es la misma con tamaños de ancho variados. El método rowGrid() muestra todos los elementos de la imagen en una cuadrícula de filas rectas como se muestra en la imagen de salida.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery rowGrid Plugin</title>
<script src=
"http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>
<script src="jquery.row-grid.js"></script>
<style>
body {
text-align: center;
overflow-y: scroll;
}
.height {
height: 10px;
}
.container:after {
// float not allowed on both sides
clear: both;
}
.container:before,
.container:after {
content: "";
// element behave like a table
display: table;
}
.item img {
max-height: 100%;
max-width: 100%;
border: 1px solid black;
border-radius: 25px;
}
.first-item {
clear: both;
}
.item {
margin-bottom: 15px;
float: left;
}
.first-item {
clear: both;
}
.last-row,
.last-row ~ .item {
// remove bottom margin on last row
margin-bottom: 0;
}
</style>
<script>
$(document).ready(function() {
$(".container").rowGrid({
minMargin: 15,
maxMargin: 30,
itemSelector: ".item"
});
});
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<b> jQuery rowGrid plugin</b>
<div class="height"> </div>
<br>
<div class="container">
<div class="item">
<img src="images/background1.jpg"
width="200" height="200" />
</div>
<div class="item">
<img src="images/background2.jpg"
width="220" height="200" />
</div>
<div class="item">
<img src="images/background3.jpg"
width="210" height="200" />
</div>
<div class="item">
<img src="images/bgImage1.jpg"
width="220" height="200" />
</div>
<div class="item">
<img src="images/bgImage2.jpg"
width="200" height="200" />
</div>
<div class="item">
<img src="images/bgImage3.jpg"
width="200" height="200" />
</div>
<div class="item">
<img src="images/geeksImage1.png"
width="210" height="200" />
</div>
<div class="item">
<img src="images/geeksImage2.png"
width="220" height="200" />
</div>
<div class="item">
<img src="images/geeksImage3.png"
width="260" height="200" />
</div>
<div class="item">
<img src="images/geeksImage4.png"
width="200" height="200" />
</div>
<div class="item">
<img src="images/geeksimage5.png"
width="200" height="200" />
</div>
<div class="item">
<img src="images/geeksimage6.png"
width="200" height="200" />
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente ejemplo, se proporciona un botón para agregar dinámicamente más elementos de imagen en el diseño del contenedor desde la ruta de la imagen para mostrarlos en una fila recta. El complemento rowGrid se usa para implementar el desplazamiento vertical a medida que se agregan los elementos. El programador puede ajustar el enlace URL de la imagen según la aplicación.
html
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA