Diseño de cuadrícula fluida responsive de Pinterest con JavaScript puro

Vista prévia

Descripción

Una solución de JavaScript puro utilizada para crear una cascada fluida y receptiva layout de cuadrícula como se ve en Pinterest.com .

Funcionamiento

Cargue la biblioteca de JavaScript responsive_waterfall. js al final del documento.

<script src="responsive_waterfall.js"></script>

Cree un diseño de rejilla siguiendo la estructura HTML como esta:

<div class="wf-container">

<div class="wf-box"> <img src="1.jpg">


<div class="content">



<h3>Title 1</h3>



<p>Content Here</p>


</div>

</div>

<div class="wf-box"> <img src="2.jpg">


<div class="content">



<h3>Title 2</h3>



<p>Content Here</p>


</div>

</div>

<div class="wf-box"> <img src="3.jpg">


<div class="content">



<h3>Title 3</h3>



<p>Content Here</p>


</div>

</div>

...
</div>

Estilos CSS personalizados para el diseño de cuadrícula.

.wf-container { margin: 0 auto; }

.wf-container:before,
.wf-container:after {

content: '';

display: table;
}

.wf-container:after { clear: both; }

.wf-box { margin: 10px; }

.wf-box img {

display: block;

width: 100%;
}

.wf-box .content {

border: 1px solid #ccc;

border-top-width: 0;

padding: 5px 8px;
}

.wf-column { float: left; }

Haga que el diseño de cuadrícula responda mediante consultas de medios CSS3.

@media screen and (min-width: 768px) {

.wf-container { width: 750px; }

}

@media screen and (min-width: 992px) {

.wf-container { width: 970px; }

}

@media screen and (min-width: 1200px) {

.wf-container { width: 1170px; }

}

Inicializar el diseño de cuadrícula y listo.

// use querySelector/querySelectorAll internally
var waterfall = new Waterfall({


 containerSelector: '.wf-container',


boxSelector: '.wf-box',


minBoxWidth: 250
});

Registro de cambios

07/10/2018

• Utilice la reserva Element. Remove () para la compatibilidad de IE