RowGrid para ordenar imágenes y hacerlas responsivas.



RowGrid para ordenar imágenes y hacerlas responsivas, es importante reconocer que ordenar las imágenes no es tarea fácil cuando estas realizando un desarrollo, sitio web, o alguna demostración, sobre todo cuando las diferentes pantallas son tú prioridad.

Una de las principales causas por las que te puedes tardar mucho tiempo en terminar un proyecto que contenga imágenes son:

1.- Empezar un diseño desde cero (sin usar ningún framework)

2.- Adaptar algun CSS de un sitio antiguo.

3.- Modificar una galería de imágenes que no es responsiva.

4.- Que el usuario quiera un desarrollo desde cero (si eres diseñador).

Bueno con RowGrid no tienes que preocuparte tanto por las imágenes, ya que es un plugin que manipula el html, volviéndolas responsivas, tambien puedes convertirla en scroll infinito .

La manera en que se implementa no es tan sencilla (tienes que tener un nivel intermedio en javascript) para entender algunas funcionalidades.

Aunque en el sitio en github, se nos muestra claramente como se lleva a cabo la instalación, mostrandonos paso a paso la implementacion con  CSS, HTML, JS, es importante también comentarlo en este espacio.

De primera instancia tenemos que incluir los archivos js.

<script type="text/javascript" src="path/to/jquery.min.js">// <![CDATA[

<script src="path/to/jquery.row-grid.min.js" >

HTML – Nuestras imágenes.


<div class="container">
<div class="item">
 <img src="path/to/image" width="120" height="100" /></div>
<div class="item">
 <img src="path/to/image" width="130" height="100" /></div>

 ...</div>

CSS

.container {
 background: #eee;
}
/* clearfix */
.container:before,
.container:after {
 content: "";
 display: table;
}
.container:after {
 clear: both;
}

.item {
 float: left;
 margin-bottom: 10px;
}
.item img {
 max-width: 100%;
 max-height: 100%;
 vertical-align: bottom;
}
.first-item {
 clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
 margin-bottom: 0;
}

JS – esencial

$(document).ready(function() {
 var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
 $(".container").rowGrid(options);
});

JSS complejo:

$(document).ready(function() {
 var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
 $(".container").rowGrid(options);

// endless scrolling
 $(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
 $(".container").append("

<div class='item'><img src='path/to/image' width='140' height='100' /></div>

");
 $(".container").rowGrid("appended");
 }
 });
});


// ]]>

You may also like...